ff-stream-web

git clone git://archive.git.mtrnord.blog/MTRNord/ff-stream-web.git
Log | Files | Refs | README | LICENSE

testing-your-application.md (2763B)

      1 ## Testing your application
      2 
      3 ### Used libraries
      4 
      5 RSK comes with the following libraries for testing purposes:
      6 
      7 - [Mocha](https://mochajs.org/) - Node.js and browser test runner
      8 - [Chai](http://chaijs.com/) - Assertion library
      9 - [Enzyme](https://github.com/airbnb/enzyme) - Testing utilities for React
     10 
     11 You may also want to take a look at the following related packages:
     12 
     13 - [jsdom](https://github.com/tmpvar/jsdom)
     14 - [react-addons-test-utils](https://www.npmjs.com/package/react-addons-test-utils)
     15 
     16 ### Running tests
     17 
     18 To test your application simply run the
     19 [`yarn test`](https://github.com/kriasoft/react-starter-kit/blob/b22b1810461cec9c53eedffe632a3ce70a6b29a3/package.json#L154)
     20 command which will:
     21 - recursively find all files ending with `.test.js` in your `src/` directory
     22 - mocha execute found files
     23 
     24 ```bash
     25 yarn test
     26 ```
     27 
     28 ### Conventions
     29 
     30 - test filenames MUST end with `test.js` or `yarn test` will not be able to detect them
     31 - test filenames SHOULD be named after the related component (e.g. create `Login.test.js` for
     32 `Login.js` component)
     33 
     34 ### Basic example
     35 
     36 To help you on your way RSK comes with the following
     37 [basic test case](https://github.com/kriasoft/react-starter-kit/blob/master/src/components/Layout/Layout.test.js)
     38 you can use as a starting point:
     39 
     40 ```js
     41 import React from 'react';
     42 import { expect } from 'chai';
     43 import { shallow } from 'enzyme';
     44 import App from '../App';
     45 import Layout from './Layout';
     46 
     47 describe('Layout', () => {
     48 
     49   it('renders children correctly', () => {
     50     const wrapper = shallow(
     51       <App context={{ insertCss: () => {} }}>
     52         <Layout>
     53           <div className="child" />
     54         </Layout>
     55       </App>
     56     );
     57 
     58     expect(wrapper.contains(<div className="child" />)).to.be.true;
     59   });
     60 
     61 });
     62 ```
     63 
     64 ### React-intl exampleß
     65 
     66 React-intl users MUST render/wrap components inside an IntlProvider like the example below:
     67 
     68 The example below example is a drop-in test for the RSK `Header` component:
     69 
     70 ```js
     71 import React from 'react';
     72 import Header from './Header';
     73 import IntlProvider from 'react-intl';
     74 import Navigation from '../../components/Navigation';
     75 
     76 describe('A test suite for <Header />', () => {
     77 
     78   it('should contain a <Navigation/> component', () => {
     79     it('rendering', () => {
     80       const wrapper = renderIntoDocument(<IntlProvider locale="en"><Header /></IntlProvider>);
     81       expect(wrapper.find(Navigation)).to.have.length(1);
     82     });
     83   });
     84 
     85 });
     86 ```
     87 
     88 Please note that  NOT using IntlProvider will produce the following error: 
     89 
     90 > Invariant Violation: [React Intl] Could not find required `intl` object. <IntlProvider>
     91 > needs to exist in the component ancestry.
     92 
     93 ### Linting
     94 
     95 In order to check if your JavaScript and CSS code follows the suggested style guidelines run:
     96 
     97 ```bash
     98 yarn run lint
     99 ```
    100