Jest vs Mocha: Which Should You Choose?

A brief overview of two major testing frameworks and a little bonus called Enzyme

With the growing popularity of JavaScript frameworks such as React, Angular, and Vue, testing your client-side code is becoming even more vital. When it comes to test frameworks, there are two major contenders in 2018: Jest and Mocha. Which you choose depends entirely on what you’re wanting out of a testing framework.

Jest

Jest is an open-source testing framework that has become increasingly popular recently. Developed by Facebook and built into the popular create-react-app package, Jest makes it faster and easier to write idiomatic JavaScript tests by having everything included. Jest comes with built-in mocking and assertion abilities. In addition, Jest runs your tests concurrently in parallel, providing a smoother, faster test run.

Want to read this story later? Save it in Journal.

Jest also provides snapshot testing. Snapshot testing is a great way to ensure that your UI doesn’t change unexpectedly. Snapshots render a UI component, take a screenshot of it, and compare the component to a reference image stored with the test. Snapshots make testing basic UI components extremely simple with one line of code: expect(component).toMatchSnapshot();. Done.

The greatest thing about Jest is that it just works right out of the box. There’s no up front configuration that you have to do. You just install it through npm or yarn, write your test, and run jest. It’s that simple. If you do want to change the configurations, Jest allows you to do so in the package.json with many configuration options.

Note: While Jest was developed by Facebook, it is not exclusive to React. Jest has more information and guides to testing other JavaScript frameworks in their documentation.

Mocha

Mocha is one of the most flexible JavaScript testing libraries available. Mocha provides developers with a base test framework, allowing you to have options as to which assertion, mocking, and spy libraries you want to use. This does require some additional setup and configuration, which is a downside. However, if having complete control of your testing framework is something you want, Mocha is by far the most configurable and best choice.

So, with a completely configurable testing framework, which assertion, mocking, and spy libraries should you use? Chai is one of the most popular open-source assertion libraries used with Mocha. Chai is a BDD/TDD assertion library with an abundance of plugins and extensions. Sinon is a popular mocking and spy library. With robust documentation on fakes, stubs, spies, and mocks, Sinon is easy to pick up and integrate with Mocha.

Mocha is an older and more mature open-source project than Jest. The community is large and provides a vast variety of documentation, StackOverflow questions, and support articles for if you get stuck in configuration.

Which should you choose?

Which framework will work best for you is entirely dependent on what your project demands. If you have a large project with the need for flexibility and customization then Mocha is probably the choice for you. If you have a smaller project and don’t need the extra setup and configuration up front, Jest is probably the better option. The choice is yours as to which framework is going to be the best solution for you and your team.

Bonus: Enzyme

Enzyme was developed by Airbnb for testing React components’ outputs. Enzyme shallow renders your components so that you ensure that your component is being passed the correct props and behaviors. Enzyme can be used in addition to any testing framework. Enzyme is easy to configure and has additional libraries for integration with popular libraries (like jest-enzyme and chai-enzyme).

Note: If your project is using React 16.x, you will need to configure an Adaptor in your project with the enzyme-adapter-react-16 package.

More from Journal

There are many Black creators doing incredible work in Tech. This collection of resources shines a light on some of us: