testing-your-application.md

Testing your application

Used libraries

RSK comes with the following libraries for testing purposes:

• Mocha - Node.js and browser test runner
• Chai - Assertion library
• Enzyme - Testing utilities for React

You may also want to take a look at the following related packages:

• jsdom
• react-addons-test-utils

Running tests

To test your application simply run the yarn test command which will:

• recursively find all files ending with .test.js in your src/ directory
• mocha execute found files

yarn test

Conventions

• test filenames MUST end with test.js or yarn test will not be able to detect them
• test filenames SHOULD be named after the related component (e.g. create Login.test.js for Login.js component)

Basic example

To help you on your way RSK comes with the following basic test case you can use as a starting point:

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import App from '../App';
import Layout from './Layout';

describe('Layout', () => {

  it('renders children correctly', () => {
    const wrapper = shallow(
      <App context={{ insertCss: () => {} }}>
        <Layout>
          <div className="child" />
        </Layout>
      </App>
    );

    expect(wrapper.contains(<div className="child" />)).to.be.true;
  });

});

React-intl exampleß

React-intl users MUST render/wrap components inside an IntlProvider like the example below:

The example below example is a drop-in test for the RSK Header component:

import React from 'react';
import Header from './Header';
import IntlProvider from 'react-intl';
import Navigation from '../../components/Navigation';

describe('A test suite for <Header />', () => {

  it('should contain a <Navigation/> component', () => {
    it('rendering', () => {
      const wrapper = renderIntoDocument(<IntlProvider locale="en"><Header /></IntlProvider>);
      expect(wrapper.find(Navigation)).to.have.length(1);
    });
  });

});

Please note that NOT using IntlProvider will produce the following error:

Invariant Violation: [React Intl] Could not find required intl object. needs to exist in the component ancestry.

Linting

In order to check if your JavaScript and CSS code follows the suggested style guidelines run:

yarn run lint