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 generall 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), it’s features and try to compare it.

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 browers or legacy browsers. Furthermore you can run test remotly 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.

For example adding firefox browser to test configuration:

and inside configuration file:

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 dev says 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. I think Karma offers 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. Alghough Jest is officially recommended by Facebook developers, it seems that Mocha stack is more popular (especially in combination with Enzyme).

The main difference is in (futuristic) Jest’s approach  “auto mocking” – Jests 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 offers a lot of helpful methods to render, assert and traverse components, simulates clicks and other. Auto mocking is expensive and tests lasts mentionably longer what is (to be honest) really pain during development.

Next difference is that 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 claims that installation, setup and configuration of Jest tests is less complicated that Mocha. That could be true since Jest is all in one package and you need to setup for example assertion library when using Mocha. But the effort is minimal and this criteria definitely shouldn’t be deciding. In my personal experience I ran into trouble when first tried to setup Jest which auto mocks whole node_modules. It didn’t run my tests and I must explicitely configure which modules not to mock which was more confusing than the whole Mocha setup.

The table below sumarizes several pros and cons of each:

* jasmine will be probably replaced in the future

To summarize thoughts above:

• Jest is recommended by Facebook to test React components however Mocha with Enzyme is widely popular
• Jest is slower because its auto mocking feature
• You don’t need auto mocking when you test React components
• Mocha more flexible and it is expected to be used with other libriaries like Chai, Sinon.JS
• Jasmine is all-in-one test library (runner, assertions, mocks)
• Installation and setup is not the criteria for choosing the right test framework

Conclusion

All mentioned libraries are very sophisticated and do a great job when are 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 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 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.