Choosing testing framework for your React application

Recently, while working on a React/Redux based single page application, I was required to choose a testing framework. Since this was my first attempt at testing JavaScript based front-end applications, I started googling around to find the best possible tool to automate testing of my application. It was not long before I ended up being totally confused. Do you know why?

Because there are too many to choose from and it’s tough to decide, since they all do basically the same thing:

  1. Describe what you’re testing
  2. Set up what you’re going to test
  3. Assert whether the thing did what you expect

Having said that, when you have to choose, no matter how hard it is, you have to choose.

Test tools can be divided based on functionalities that they provide. Some provide us with only one functionality, and some provide us with a combination. It’s common to use a combination of tools even if one can achieve the same in theory to get a more suitable functionality for your needs.

Here is a list of the most prominent tools with some of their pros and cons:

Jasmine

Pros:

1. Simple to setup – Works out the box

2. Provides almost everything that you need for testing

3. Headless running out of the box

Cons:

1. Asynchronous testing can be a bit of a headache

2. Pollutes global environment

Mocha – simple, flexible, fun

Pros:

1. Built in support for Promises – makes asynchronous testing easy

2. Headless running out of the box

Cons:

1. Doesn’t have built-in assertion library and mocking utilities

2. Runs all tests in same process, which means shared memory or no isolation.

QUnit

Pros:

1. Works well with jQuery

2. Supported by a lot of CI servers

Cons:

1. Asynchronous testing is a pain at times.

2. No baked-in headless run support

3. Makes including 3rd party libraries (like assertion libraries) relatively difficult

Ava – Futuristic JavaScript test runner

Pros:

1. Simple to use

2. Each test runs in isolation

3. Doesn’t pollute global environment

4. Runs tests asynchronously

Cons:

1. Only supports tests in Node and not the browser

Jest – Painless JavaScript Testing

Pros:

1. Used and recommended by Facebook alongside a variety of React applications

2. Fast – due to its clever parallel testing

3. Comes with a wide API, not requiring you to include additional libraries

4. Jest continues to improve considerably with every update they make

5. Snapshot testing – a great tool to ensure that your application’s UI doesn’t unexpectedly change between releases.

6. Good mocking system

7. Includes a powerful and fast built-in code coverage tool – based on Istanbul

8. When running in watch mode, only tests files that have been updated.

6. Not just limited to testing React based applications.

Cons:

1. Pollutes global environment

2. Before 15.0, used to mock all by default – making it very slow

In short, if you want to “just get started” or looking for a fast framework for large projects, go with Jest.

If you want a very flexible configuration, go with Mocha.
If you are looking for simplicity go with Ava.

If you want to be really low-level, go with tape.

After all this research, I choose to go ahead with Jest. Why Jest?

  1. Compatibility: We are using React in our project. React and Jest comes from the same company (i.e. Facebook). What it means is perfect compatibility and full utilization of Jest’s features.
  2. Community Support: Jest community is very active and supportive. So in case we face any issues, we can always get help.
  3. Snapshot Testing: Jest provides a wonderful feature called “Snapshot Testing”, which in my opinion is a great tool to test isolated view components. Also, it goes with React philosophy.
  4. Speed: As developers, we tend to skip the test if it takes too long. Thanks to Jest’s parallel testing, we get speedy results.
  5. Coverage Report: Integrated coverage report helps me a a lot.
  6. One stop solution: Be it mocking, coverage reports, performance, good community support, etc.
  7. Ease of Integration
  8. Well documented

 

If you ask me what is the one thing that you liked the most about Jest. My answer would be: “Ease of integration“. If you are using create_react_app (like I am) to get started with your react project, it’s works out of the box. Yeee! no manual configuration required.

Setting up your project from scratch? No problem. It’s still very easy to setup Jest. Just follow the instructions provided in their documentation and within no time you will be up and running with some examples.

 

Completed the setup and wondering how to get started? Which commands to use?

Don’t worry, Jest comes with great documentation, just go through the list of matchers and some examples demonstrating their usage.

 

Want to perform some operation before/after each test case?

No worries, Jest provides you with some before and after hooks.

 

JavaScript means a lot of asynchronous code. How do I test that?

Jest supports testing both callbacks and promises.

 

I have written test cases, how do I execute them?

Just type jest and all test cases will run. More command line options are available here.

 

Trying to mock functions?

Check this out

 

You are an advanced user and looking for customizations?

Jest documentation has a section for you as well. Just click here

 

Hope my experience helps someone. If any of you have an experience to share or any questions, feel free to send them to me.

Advertisements
Standard

One thought on “Choosing testing framework for your React application

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s