The best JavaScript testing tools for React

How to choose the right test runner, test framework, assertion libraries, and add-on tools for your React project

Become An Insider

Sign up now and get FREE access to hundreds of Insider articles, guides, reviews, interviews, blogs, and other premium content. Learn more.

Several years into widespread JavaScript fatigue, the front-end ecosystem isn’t getting any smaller or simpler. The world of front-end testing is also expanding, and the tools tend to be opinionated from framework to framework. This is sort of a double-edged sword. One the one hand, picking a framework narrows the testing options we have to choose from. On the other hand, testing stacks are less portable across frameworks, so we may have to learn a whole new set of tools with each new project.

In general, there are three structural layers to testing in JavaScript: test runners, test frameworks, and assertion libraries. Every testing setup requires each layer, although sometimes these layers will be consolidated into a single tool. For example, Jasmine is both an assertion library and a test framework. Beyond having to cover each of these structural components, you will typically add other useful tools to your testing stack, such as mocking libraries and code coverage tools. Below, I’ll lay out the most common tools used in React testing and how to go about choosing which ones are right for you.

Choose a JavaScript test runner

Test runners are the most fundamental part of the testing stack. If you have a clunky or cumbersome way to run your tests, you will abandon testing long before you can experience the advantages or disadvantages of frameworks and assertion libraries. In my own testing journey, discovering and incorporating Karma into the testing stack was a game-changer. Karma runs your suite of tests in one or more browsers of your choice automatically. It is particularly useful to ensure that your code is safe from browser implementation quirks, and provides a level of confidence unmatched by other solutions. Karma can be configured to run against browsers locally or to use remote services like Sauce Labs and BrowserStack.

Karma is my runner of choice, but many React developers turn to the Mocha CLI for simplicity. We’ll discuss Mocha in the section on test frameworks, but for now I’ll just mention that the Mocha CLI will easily run your Mocha tests in a Node.js environment. The ease of this basic approach poses a bit of a problem if you want to test component interactions that rely on rendering or the DOM, in which case you’ll have to incorporate something like Enzyme or JSDOM, respectively. Unfortunately, there isn’t a mechanism to run tests in the browser using the Mocha CLI. That limitation can simplify the decision-making process if you’ve got hard requirements for in-browser testing. The two other test frameworks we’ll review, Jasmine and Jest, also have CLIs to help run their tests. These two CLI tools have the same benefits and drawbacks as the Mocha CLI.

To continue reading this article register now