Skip to content

Commit

Permalink
Adds testing section (#687)
Browse files Browse the repository at this point in the history
Integrates comments by @langpavel
  • Loading branch information
bravo-kernel authored and koistya committed Jun 9, 2016
1 parent daf10cf commit 8c3bd6c
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* [React Style Guide](./react-style-guide.md)
* [How to configure text editors and IDEs](./how-to-configure-text-editors.md)
* [Data fetching with WHATWG Fetch](./data-fetching.md)
* [Testing your application](./testing-your-application.md)

### Questions

Expand Down
97 changes: 97 additions & 0 deletions docs/testing-your-application.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
## Testing your application

### Used libraries

RSK comes with the following libraries for testing purposes:

- [Mocha](https://mochajs.org/) - Node.js and browser test runner
- [Chai](http://chaijs.com/) - Assertion library
- [Enzyme](https://github.com/airbnb/enzyme) - Testing utilities for React

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

- [jsdom](https://github.com/tmpvar/jsdom)
- [react-addons-test-utils](https://www.npmjs.com/package/react-addons-test-utils)

### Running tests

To test your application simply run the
[`npm test`](https://github.com/kriasoft/react-starter-kit/blob/b22b1810461cec9c53eedffe632a3ce70a6b29a3/package.json#L154)
command which will:
- recursively find all files ending with `.test.js` in your `src/` directory
- mocha execute found files

```bash
npm test
```

### Conventions

- test filenames MUST end with `test.js` or `npm 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](https://github.com/kriasoft/react-starter-kit/blob/master/src/components/App/App.test.js)
you can use as a starting point:

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

describe('App', () => {

it('renders children correctly', () => {
const wrapper = shallow(
<App context={{ insertCss: () => {} }}>
<div className="child" />
</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:

```js
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. <IntlProvider>
> needs to exist in the component ancestry.
### Linting

Running RSK eslint will also scan your test files:

```bash
npm run eslint
```

0 comments on commit 8c3bd6c

Please sign in to comment.