How to Set up a Test Environment in React
Written by: Natasha Osborne
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:
- An assertion library
- A testing framework
- A test builder
- (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 here.
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 here.
Check out our post on setting up test builders.
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!
