### Find the right React Unit Test Tools

Pick up the right Unit Test tool for React Component is confusing, as the result of **_‘react unit test’_** 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?

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_](https://hackernoon.com/testing-react-components-with-jest-and-enzyme-41d592c174f#.ywbnzlakf)):

1.  _Testing basic component rendering_
2.  _Testing props_
3.  _Testing events_
4.  _Testing event handlers_

Two most popular options are **Jest** and **Enzyme**. After spending hours in try out those tools, I end up in the great **Airbnb open sourced Enzyme.**

#### jest

[Jest](https://github.com/facebook/jest) is a JavaScript test runner maintained by Facebook. Included performance, mocking, **snapshot**, code coverage, sandbox.

_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

[jsdom](https://github.com/tmpvar/jsdom) provides React the required DOM to render to, implementing a suitable subset of browser’s DOM implementations entirely in node/io.js.

#### Enzyme

is a library that wraps packages like **React TestUtils**, **JSDOM** and **CheerIO** to create a simpler interface for writing unit tests (work with shallow rendering).

### Example

This is the [git](https://github.com/wahengchang/react-test-must-know) of the example using E**nzyme** to test React component:

**Install**

    $ git clone https://github.com/wahengchang/react-test-must-know$ npm install

**Run Tests**

    $ npm test

\> jest  
**PASS ** src/\_\_tests\_\_/**simpleFoo-test.js  
PASS ** src/\_\_tests\_\_/**Foo-test.js**

**Test Summary  
**› Ran all tests.  
**› 7 tests passed** (7 total in 2 test suites, run time 2.08s)

#### **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_](https://stackoverflow.com/questions/40795850/how-to-test-style-for-a-react-component-attribute-with-enzyme))

wrapper.find('.myClassname')`.get(0).style;   expect(containerStyle).to.have.property('opacity', '1');`

#### Asserting class name ([from](https://stackoverflow.com/questions/40795850/how-to-test-style-for-a-react-component-attribute-with-enzyme))

    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 **interact** with DOM APIs, or may require the full lifecycle in order to fully test the component (i.e., `componentDidMount` etc.)

i`mport { mount } from 'enzyme';      const wrapper = **mount**(<MyComponent />);`

#### Static Rendering

It is used to render react components to **_static HTML_** and analyze the resulting HTML structure.

    import { render } from 'enzyme';const wrapper = render(<MyComponent />);

#### enzyme.wraper

A wrapper refers to the enzyme wrapper class that provides the API ([more](http://airbnb.io/enzyme/GLOSSARY.html#wrapper)).

wrapper.**find**(Foo)  
wrapper.**find**('.icon-star')  
wrapper.**find**('button').simulate('click')  
wrapper.**contains**(<div className="unique" />)  
wrapper.**props**().data  
wrapper.**state**().data

### Reference:

[https://github.com/wahengchang/react-test-must-know](https://github.com/wahengchang/react-test-must-know)

[http://blog.iannelson.systems/12-reasons-why-i-love-unit-tests/](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/blob/master/examples/snapshot/Link.react.js)

[https://github.com/facebook/jest](https://github.com/facebook/jest)

[https://facebook.github.io/jest/docs/tutorial-react.html](https://facebook.github.io/jest/docs/tutorial-react.html)

[https://github.com/facebook/jest/tree/master/examples/snapshot](https://github.com/facebook/jest/tree/master/examples/snapshot)

[https://www.codementor.io/vijayst/unit-testing-react-components-jest-or-enzyme-du1087lh8](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](https://hackernoon.com/testing-react-components-with-jest-and-enzyme-41d592c174f#.d3lo5wnl5)

[http://airbnb.io/enzyme/docs/api/shallow.html](http://airbnb.io/enzyme/docs/api/shallow.html)

AirBnB

Facebook

Google

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

[React] Review: Component Unit Test is easy

Too Long; Didn't Read

Companies Mentioned

@peterchang_82818

RELATED STORIES