React Testing with Jasmine: A Simpler Way

When you research how to test React code, most resources you find will be about testing with Jest. Since Jest is Facebook’s preferred way to test React, the React community seems to have broadly adopted it (though I have not been able to find any hard stats to support my impression). We found a simpler way, try react testing with Jasmine!

However, you don’t have to use Jest to test React code. You might want to avoid Jest if you don’t need its features, don’t like its conventions, or if Jest is incompatible with your other tools. If you choose not to use Jest, you can use Jasmine directly instead.

Here’s how to do react testing with Jasmine:

1. Set up Jasmine like you would for any other project

2. Set up React with add-ons

Depending on your React version and environment, you will need to either use a version of React with add-ons bundled in, or use the react-addons-test-utils npm package. Either way, you must include this version of React in the JS bundle that Jasmine runs.

3. Read the docs

The docs for Jasmine and the React test utils are both quick reads. You don’t have to memorize them. You probably won’t fully understand them until you have some practice. It does help to be mentally primed.

• Jasmine Docs
• React test utils

4. Learn the outline of a React test in Jasmine

To me, the hardest part of learning to test React was getting my first, most basic test written. There’s a particular sequence of calls you need to make to get a full instance of your component rendered and ready for testing. Once I figured out how to do that, learning to apply new matchers and utilities was fairly easy.

Here’s my outline of a simple Jasmine test for a react component to get you started:

describe('MyComponent', function() {
  var Utils = React.addons.TestUtils;

  it('can render without error', function() {
    var component, element;
    // First we create an element, which is a description of the component we
    // would like to render (It has no methods, see:
    // https://facebook.github.io/react/docs/glossary.html so it isn't useful
    // for testing by itself)
    element = React.createElement(
      MyComponent, // component class
      {} // props go here
      // You can also add children here as the last argument
    );

    // Render into a document fragment and return the full component instance.
    // You'll generally be testing `component`'s behavior in the rest of your
    // test.
    expect(function() {
      component = Utils.renderIntoDocument(element);
    }).not.toThrow();
  });
})

5. Add new React test utils methods and Jasmine matchers as needed

You don’t need to know every matcher and every method in the React test utilities. It is better to have basic tests than no tests at all.

After you can write trivial tests well, I recommend learning how to use React event simulation and Jasmine spies to test what happens when users interact with your components.