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).
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 use Jasmine with React:
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.
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(){varUtils=React.addons.TestUtils;it('can render without error',function(){varcomponent,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.
