Find the right React Unit Test Tools Pick up the right Unit Test tool for React Component is confusing, as the result of from google, hundreds of combination of chai+jsdom, jest+mocha, mocha+enzyme etc, come up to my eyes. Hey, Google, Can you just tell me the BESTest one and don’t make me think? ‘react unit test’ Unit Test of React Component is a bit different, rather than verifying output of functions, Unit Test in React requires 4 extra testing purpose ( ): Ref Artem Testing basic component rendering Testing props Testing events Testing event handlers Two most popular options are and . After spending hours in try out those tools, I end up in the great Jest Enzyme Airbnb open sourced Enzyme. jest is a JavaScript test runner maintained by Facebook. Included performance, mocking, , code coverage, sandbox. Jest snapshot When using Jest to test a React or React Native application, you can write a snapshot test that will save the output of a rendered component to file and compare the component’s output to the snapshot on subsequent runs. This is useful in knowing when your component changes its behaviour. jsdom + Mocha provides React the required DOM to render to, implementing a suitable subset of browser’s DOM implementations entirely in node/io.js. jsdom Enzyme is a library that wraps packages like , and to create a simpler interface for writing unit tests (work with shallow rendering). React TestUtils JSDOM CheerIO Example This is the of the example using E to test React component: git nzyme Install $ git clone https://github.com/wahengchang/react-test-must-know$ npm install Run Tests $ npm test > jest**PASS ** src/__tests__/**simpleFoo-test.jsPASS ** src/__tests__/ Foo-test.js **Test Summary**› Ran all tests. (7 total in 2 test suites, run time 2.08s) › 7 tests passed Should know 1.Verfity values of state/proprs in a component const wrapper = shallow(<ComponentName />); expect(wrapper.state().data).toBe('something');expect(wrapper.props().data).toBe('something'); 2.Verfity values of tag in a component const wrapper = shallow(<ComponentName />); expect(wrapper.find('h4').length).toBe(1);expect(wrapper.find('h4').at(0).text()).toBe('Something'); 3.Simulating click event of a button const wrapper = shallow(<ComponentName />); expect(wrapper.state().data).toBe('state1');wrapper.find('button').simulate('click');expect(wrapper.state().data).toBe('state2'); Trick Asserting style ( ) from wrapper.find('.myClassname') .get(0).style; expect(containerStyle).to.have.property('opacity', '1'); Asserting class name ( ) from const span = mount(<Test />).find('span');expect(span.html().match(/style="([^"]*)"/i)[1]).toBe('color: #000;'); *Remark Shallow Rendering testing a component as a unit, import { shallow } from 'enzyme';const wrapper = shallow(<MyComponent />); Full Rendering Components that may with DOM APIs, or may require the full lifecycle in order to fully test the component (i.e., etc.) interact componentDidMount i mport { mount } from 'enzyme'; const wrapper = **mount**(<MyComponent />); Static Rendering It is used to render react components to and analyze the resulting HTML structure. static HTML import { render } from 'enzyme';const wrapper = render(<MyComponent />); enzyme.wraper A wrapper refers to the enzyme wrapper class that provides the API ( ). more wrapper. (Foo)wrapper. ('.icon-star')wrapper. ('button').simulate('click')wrapper. (<div className="unique" />)wrapper. ().datawrapper. ().data find find find contains props state Reference: https://github.com/wahengchang/react-test-must-know http://blog.iannelson.systems/12-reasons-why-i-love-unit-tests/ https://github.com/facebook/jest/blob/master/examples/snapshot/Link.react.js https://github.com/facebook/jest https://facebook.github.io/jest/docs/tutorial-react.html https://github.com/facebook/jest/tree/master/examples/snapshot https://www.codementor.io/vijayst/unit-testing-react-components-jest-or-enzyme-du1087lh8 https://hackernoon.com/testing-react-components-with-jest-and-enzyme-41d592c174f#.d3lo5wnl5 http://airbnb.io/enzyme/docs/api/shallow.html
![featured image - [React] Review: Component Unit Test is easy](https://hackernoon.imgix.net/hn-images/1*F-LbtrbKqWqpaYwsfjwydA.jpeg?auto=format&fit=max&w=3840)
