Testing React Applications with Karma, Jest or Mocha
Comparing Karma, Jest and Mocha for testing React applications — their strengths, weaknesses, and when to use each.
Nowadays in the ever changing "world of JavaScript and React" there are many libraries which could be used to test React components. It could be hard especially for newcomers to find out which library suits their problems best.
In general test frameworks are expected to:
- Provide test structure (Mocha, Jasmine, Jest)
- Run tests and display test results (Mocha, Jasmine, Jest, Karma)
- Make assertions (Chai, Jasmine)
- Support mocks, spies, stubs (Sinon.JS, Jasmine)
- Generate code coverage reports (Istanbul)
Furthermore when you test React app you also need some utilities to work with JSX, rendering or shallow rendering, component traversing or simulating user actions. This is job for React Test Utils or Enzyme.
In this blog I will focus on most used test runners to test React components (Karma, Jest and Mocha), their features and try to compare them.
Karma
Karma allows you to run your tests in real browsers. It is a great feature especially when your application is supposed to support multiple browsers or legacy browsers. Furthermore you can run tests remotely using webdriver or services like SauceLabs or BrowserStack. You can run your tests in multiple browsers with installing relevant launcher and just a few lines of configuration.
Example: Adding Firefox Browser
Installation:
npm install karma-firefox-launcher --save-devConfiguration:
module.exports = function(config) {
config.set({
browsers : ['Chrome', 'Firefox']
});
};It supports all major browsers including Phantom.js and can be also run inside Node.js using jsdom. Just to mention it is common to use Karma with other test runners like Mocha or Jest.
Some developers say that it's worthless to run unit test suites against real browsers and you should write end to end tests instead. However e2e tests are expensive, take longer to run and mostly don't cover each use case. Karma offers an easy and fast solution to find compatibility bugs (if you fail, you will fail fast). It is definitely worth to try!
Jest vs. Mocha
The big debates are whether to use Jest or Mocha. Both are great libraries, each has its own pros and cons. Although Jest is officially recommended by Facebook developers, it seems that Mocha stack is more popular (especially in combination with Enzyme).
Key Differences
The main difference is in Jest's "auto mocking" approach — Jest's developers decided to mock every dependency except tested unit. It is not a good or bad approach, it's just different. In applications where you need to mock every dependency in most cases it can dramatically reduce boilerplate and ease writing tests. However when you test React you don't exclusively need auto mocking while there are utilities (React Test Utils) which provides shallow rendering. Test utilities like Enzyme offer a lot of helpful methods to render, assert and traverse components, simulate clicks and other. Auto mocking is expensive and tests last noticeably longer which is (to be honest) really pain during development.
Jest uses Jasmine 2 as default for assertions, mocking and it also has its own mocking methods. On the other hand Mocha is more flexible and you can choose what you need and like. It can be used together with any other assertions or mock library (Chai, Sinon.JS, …).
Some claim that installation, setup and configuration of Jest tests is less complicated than Mocha. That could be true since Jest is all in one package and you need to set up for example an assertion library when using Mocha. But the effort is minimal and this criteria definitely shouldn't be deciding.
Comparison
| Criteria | Jest | Mocha |
|---|---|---|
| Pros | Officially supported by React dev | More popular in JS community |
| Auto mocking | Flexible (can be used with any assertion, mock, report library) | |
| Snapshot testing | Clear, simple API | |
| Asynchronous code testing support | Asynchronous code testing support | |
| React Native testing | React Native testing (in combination with Enzyme) | |
| Fast test run | ||
| Cons | Slower due to auto mocking | No auto mocking or snapshot testing |
| Enforces use of Jasmine* | Poor documentation |
*Jasmine will probably be replaced in the future
Conclusion
All mentioned libraries are very sophisticated and do a great job when used right. Karma is a great tool which can be used independently from other test runners. There is no reason to not give it a chance!
I would personally choose Mocha over Jest especially in combination with Enzyme. It is fast which is comfortable during development (and that's what you do everyday). When you use it with live test watching it is a great experience. It is also more flexible and can be used with awesome projects like Chai or Sinon.JS.
On the other hand Jest has nice and promising ideas like auto mocking or snapshot testing. It is still evolving and it will be nice to see the progress in the future. Both Jest and Mocha are great tools and it depends on your needs which one to use.
