diff --git a/docs/README.md b/docs/README.md index b314fe324..522107b96 100644 --- a/docs/README.md +++ b/docs/README.md @@ -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 diff --git a/docs/testing-your-application.md b/docs/testing-your-application.md new file mode 100644 index 000000000..2cf77c74c --- /dev/null +++ b/docs/testing-your-application.md @@ -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( + {} }}> +
+ + ); + + expect(wrapper.contains(
)).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
', () => { + + it('should contain a component', () => { + it('rendering', () => { + const wrapper = renderIntoDocument(
); + 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 + +Running RSK eslint will also scan your test files: + +```bash +npm run eslint +``` +