Using React.addons.TestUtils to reactjs test components

Question

I am reading the reactjs documentation but I am having a having a hard time fully understanding it. I wish there were more step by step examples.

I want to be able to test my components and their child components but I am not sure how to create mocks or instances of my components to test them.

code:

import React from 'react/addons';
import Layout from '../../app/views/layout.js';

var TestUtils = React.addons.TestUtils;

var mockLayout;

describe('Layout (deep copy)', function() {
    beforeEach(function() {
        mockLayout = TestUtils.renderIntoDocument(<Layout />);
    });

    it('is DOM Component', function(done) {
        assert(TestUtils.isDOMComponent(mockLayout));
        done();
    });
});

I am getting the error and I am not sure what it means:

TypeError: Cannot read property 'getRouteAtDepth' of undefined
    at RouteHandler.createChildRouteHandler (base/spec/views/layout.js:23821:39)
    at RouteHandler.render (base/spec/views/layout.js:23836:27)
    at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (base/spec/views/layout.js:12011:35)
    at ReactCompositeComponentMixin._renderValidatedComponent (base/spec/views/layout.js:12038:15)
    at ReactPerf.measure.wrapper (base/spec/views/layout.js:3744:22)
    at ReactCompositeComponentMixin.mountComponent (base/spec/views/layout.js:11459:31)
    at ReactPerf.measure.wrapper [as mountComponent] (base/spec/views/layout.js:3744:22)
    at Object.ReactReconciler.mountComponent (base/spec/views/layout.js:3819:36)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (base/spec/views/layout.js:13014:45)
    at ReactDOMComponent.Mixin._createContentMarkup (base/spec/views/layout.js:12598:33)window.__karma__.result @ debug.html:37(anonymous function) @ adapter.js:98require.register.EventEmitter.emit @ mocha.js:616(anonymous function) @ adapter.js:73require.register.EventEmitter.emit @ mocha.js:611require.register.Runner.fail @ mocha.js:4797require.register.Runner.failHook @ mocha.js:4822(anonymous function) @ mocha.js:4863done @ mocha.js:4518require.register.Runnable.run @ mocha.js:4558next @ mocha.js:4855(anonymous function) @ mocha.js:4876timeslice @ mocha.js:6483

Answer 1

You don't necessarily mock your components when testing. Basically you just require your component when testing said component and then you render it into the DOM using the react test utils.

For instance when this is your component:

// './lib/components/Checkbox.jsx'
var React = require('react');

module.exports = React.createClass({
  getInitialState: function() {
    return { isChecked: false };
  },

  onChange: function() {
    this.setState({ isChecked: !this.state.isChecked });
  },

  render: function() {
    return (
      <label>
        <input
          type="checkbox"
          checked={ this.state.isChecked }
          onChange={ this.onChange }
        />

        { this.state.isChecked ? this.props.labelOn : this.props.labelOff }
      </label>
    );
  }
});

Your test could look like this:

// './test/Checkbox.js'
var React = require('react');
var ReactAddons = require('react/addons').addons;
var TestUtils = ReactAddons.TestUtils;
var expect = require('chai').expect;
var Checkbox = require('../lib/components/Checkbox');

describe('<Checkbox />', function() {
  before(function () {
    this.component = TestUtils.renderIntoDocument(
      <CheckboxWithLabel labelOn="on" labelOff="off" />
    );

    this.label = TestUtils.findRenderedDOMComponentWithTag(this.component, 'label');
    this.input = TestUtils.findRenderedDOMComponentWithTag(this.component, 'input');
  });

  it('component is rendered', function () {
    expect(this.component).to.exist;
  });

  it('component label text equals to "off" by default', function () {
    expect(this.label.getDOMNode().textContent).to.equal('Off');
  });

  it('component label text changes to "on" after click', function() {
    // Simulate change event.
    TestUtils.Simulate.change(input);

    expect(this.label.getDOMNode().textContent).toEqual('On');
  });
}); 

In your tests you can assert way more than depicted in the example, for instance you can:

• Assert that props are passed into components correctly.
• Assert that state is set correctly when initializing components.
• Assert that state changes correctly when certain actions are triggered.
• Assert if class names and/or ids are set correctly.
• Assert the values of text nodes.

If you're using flux you could even assert if Action Creators are called correctly from components.

The only thing to note is that you'll require is a DOM to test most of this. You can solve this by using:

• jest
• jsdom
• phantomjs to facilitate this

Personally, because I can't run jest with node v0.12.x and jsdom only supports io.js from v4.0.0, I use mochify. Because I'm usin mochajs and browserify a lot, mochify is a nice fit for me.