Tools For Setting Up A Test Environment In React

At Radial Development Group, we often choose React for front end views (typically in conjunction with Redux). Since we practice test-driven development, we also set up a test environment.

Here’s an outline of the tools we use and why. Later, we’ll follow up with some in-depth posts on how we use these tools.

When setting up your test environment, you will need at least three things, likely four:

  1. An assertion library
  2. A testing framework
  3. A test builder
  4. (Optional) Additional project-specific plugins

Assertion Library

An assertion library allows the test to expect a certain result in a test. We use Chai.

Read more about Chai. And check out a brief example here on how to use Chai.

Testing Framework

Mocha is a testing framework that provides functional blocks to write and group your tests, setup and teardown input from plugins and other imported modules; and to run assertions about the system under test. Check out our brief example here on getting started with Mocha.

Test Builder

Webpack is a module bundler (any static asset) that is used to bundle and serve the app’s files.

Read more about webpack.

Testing Plugins

  • Babel is a transpiler (there is a plugin for webpack!) that makes ES6 javascript cross-browser compatible.
  • Sinon lets you mock a function or an entire object as well as ‘spy’ on whether specific methods have been called in your tests.

XMLHttpRequest Library

We use axios as our client-side solution for making XMLHttpRequests. Radial uses moxios to test axios.

Testing React Components

With enzyme you can render react components easily and “traverse your React Components’ output” to make assertions about test results.

We’ll be updating this post and adding others with more in-depth guides to each of these tools. Stay tuned!

Leave a Reply