Hackernoon logo[React] Review: Component Unit Test is easy by@peterchang_82818

[React] Review: Component Unit Test is easy

http://www.deviantart.com/art/verifying-her-credentials-51202151

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):

  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 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 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 of the example using Enzyme 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)

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

import { 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).

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

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

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!