Unit Testing React Components

Run the test with npm run test --silent.

package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "name": "jsxtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-register": "^6.4.3",
    "extend-tape": "^1.1.0",
    "react": "^0.14.6",
    "react-addons-test-utils": "^0.14.6",
    "tap-spec": "^4.1.1",
    "tape": "^4.4.0",
    "tape-jsx-equals": "^1.0.0"
  },
  "scripts": {
    "test": "tape -r babel-register ./modules/__test__/*.js | tap-spec"
  },
  "babel": {
    "presets": ["react", "es2015"]
  },
  "author": "",
  "license": "MIT"
}
.\modules\hello.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';


class Hello extends React.Component {

  handleClick(event) {
    this.setState({honorific: 'Overlord'})
  }

  constructor(props) {
    super(props);
    this.state = {honorific: 'Captain'};
  }

  render() {
    return <h1 onClick={this.handleClick.bind(this)}>Hello {this.state.honorific} {this.props.name}</h1>;
  }
}


export default Hello;
.\modules\__test__\hello.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import {createRenderer} from 'react-addons-test-utils';
import tape from 'tape';
import addAssertions from 'extend-tape';
import jsxEquals from 'tape-jsx-equals';
import React from 'react';
import Hello from '../hello';


// extend tape with jsxEqual assertion:
const test = addAssertions(tape, {jsxEquals});


test('Hello Component', (t) => {
	const renderer = createRenderer();

  // initial rendering
  renderer.render(<Hello name="Jim Bob" />);
  let actualElement = renderer.getRenderOutput();
  let expectedElement = <h1 onClick={function noRefCheck() {}}>Hello Captain Jim Bob</h1>;

  // simulate click
  renderer.getRenderOutput().props.onClick();
  let clickedElement = renderer.getRenderOutput();
  let clickedExpectedElement = <h1 onClick={function noRefCheck() {}}>Hello Overlord Jim Bob</h1>

  // fail cakes
  let unexpectedElement = <h1>Hello Private Jim Bob</h1>;

  // compare output with the expected result:
  t.jsxEquals(actualElement, expectedElement, "this should work");
  t.jsxEquals(clickedElement, clickedExpectedElement, "this should work");
  t.jsxEquals(actualElement, unexpectedElement, "this should die");
  t.end();
});