React Testing Library – Mocha vs Jest

In order to accomplish a sophisticated testing toolset, you might have to address the following test types for your application.

  • Unit Test: Tests a function or a component in isolation.
  • Integration Test: Tests a function or component in their context. It should be possible to use it with other function(s) and component(s) in a group.
  • End-to-end Test (E2E Test): Tests the application in a real browser. Often it starts a browser, performs clicks and navigations, and asserts whether the correct elements are shown in the browser after performing an action.
  • Snapshot Test: Introduced by Facebook’s library Jest, Snapshot Tests should be the lightweight variation of testing (React) components. It should be possible to create a DOM snapshot of a component once a test for it runs for the first time and compare this snapshot to a future snapshot, when the test runs again, to make sure that nothing has changed. If something has changed, the developer has to either accept the new snapshot test (the developer is okay with the changes) or deny them and fix the component instead.
  • Screenshot Test: Applications are not often screenshot tested. However, if the business requirement is there, screenshot tests can be used to diff two screenshots from the same application state in order to verify whether something (styling, layout, …) has changed. It’s similar to a snapshot test, whereas the snapshot test only diffs the DOM and the screenshot test diffs screenshots.

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.

 

Strengths of Mocha

Mocha’s greatest strength is its flexibility. It doesn’t come with an assertion library or mocking framework. Instead, you choose to use whatever helper libraries/frameworks that you want. This SO postdiscusses some of the popular JavaScript assertion libraries. One popular choice is to use Chai for test assertions and Sinon for mocking.

Because of its maturity and widespread adoption, there is a lot of tooling built up around Mocha. To go back to the earlier WebStorm example, it’s been possible to run and debug Mocha tests in WebStorm for some time.

Lastly, the Mocha community is large, and there is a lot of support available in the form of videos, blog posts, and libraries.

Weaknesses of Mocha

Mocha’s main weakness is that it requires more configuration.

You have to explicitly choose and install an assertion library, mocking framework, etc. If you value this flexibility, that can be great, but if you don’t, it can be frustrating.

You can use snapshot testing with Mocha, but it’s not as easy to integrate. Like most things with Mocha, there is a library called chai-jest-snapshot that helps integrate this functionality However, it’s yet another thing to set up.

 

 

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.

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 jestIt’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.

 

Strengths of Jest

The biggest advantage of using Jest is that it works out of the box with minimal setup or configuration. Much of this is because it comes with an assertion library and mocking support. The tests are written in BDD style, similar to any other modern testing library. You can literally just put your tests inside of a directory called __tests__ or name them with a .spec.js or .test.js extension, then run jest and it works. That is pretty sweet.

Jest also supports snapshot testing, which can be really handy for preventing accidental UI regressions when doing React development. These tests record snapshots of rendered component structure and compare them to future renderings. When they don’t match, your test fails, indicating that something has changed. You can easily tell Jest to update the snapshot if this change is expected (e.g. for a newly added feature).

Weaknesses of Jest

Jest’s biggest weaknesses stem from being newer and less widely used among JavaScript developers.

It has less tooling and library support available compared to more mature libraries (like Mocha). Sometimes this type of tooling can be really handy, like the ability to run and debug your tests in an IDE like WebStorm. Until recently, WebStorm didn’t even support running Jest tests. This just changed with the latest WebStorm release, but it still doesn’t support interactively stepping through your tests using the debugger.

Due to its young age, it may also be more difficult to use Jest across the board for larger projects that utilize different types of testing. For example, we recently set up Nightmare for integration testing. It is easy to run Nightmare integration tests with Mocha, and the docs have nice examples. We could have probably gotten Nightmare working with Jest without much work, but this is an example of the friction you might experience if you want to integrate Jest across your project stack.


 

Conclusion:

  • Jest is simply an open JavaScript testing lib from Facebook which defines “Delightful JavaScript Testing”. Jest can be used to test any library based on JavaScript, and is delightfully useed when it comes to React or React Native.
    Both the React and Jest come from Facebook and is a major user of both. Following are the delightfull reasons for testing React applications using jest.

    • Jest is simple to install by its own. We can just simply install it in an empty directory directly using either npm or yarn. Simply by:
      yarn add –dev jest
      OR
      npm install –save-dev jest
    • Jest is very fast. When your tests are CPU bounded it saves significant time from test runs. The time rate change is like tests which used to take 45 minutes, simply drops to simply 14.5 minutes.
    • Jest inherits all the goodness of Jasmine which includes builtIn spies, matchers and its extensive mocking library. Although latest versions of Jest have been departed from Jasmine but still they keep the same functionality with its own improvements.
    • TypeScript is also a popular superset of JavaScript, Jest supports TypeScript. It is also describes as a TypeScript preprocessor. And provide a source map support for Jest and have an active community.
    • Snapshot testing is great as it let us capture strings that represent our rendered components and the store it in a separate snapshot file to compare later in order to ensure that UI is not change. While it is ideal for React apps, we can use snapshots for comparing values that are serialized from other frameworks.

 Therefore Jest is a simple and fast testing framework and is very easy to setup. Which is developed & used by Facebook to test their React applications. Indeed many other developers and other software testing company also use it to a great extend. It supports TypeScript and has all that we need in one convenient package is the best option for React application testing.

 

Other Testing Libraries which can be used with React :

  • Mocha: Mocha is a popular test runner for a JavaScript application. It is often used in React applications, whereas an alternative such as Karma, is often used in Angular applications. Test runners make it possible to execute your tests from the command line. In addition, they make sure that all the configuration for your tests is setup properly and all test files are reached in your project. Last but not least, they give your tests structure by offering functions for your test. A describeblock is used to describe a test suite (e.g. for a component or function) and a it block is used for the test itself. The output of the test suites and tests can be seen on the command line.
  • Chai: Chai is a popular assertion library. It gives you functions to make these assertions. The most simple assertion you can make in your testing block is expect(true).to.equal(true). It can be used to make assertions for functions, but also components later on by using Enzyme. A popular alternative from the Angular world would be Jasmine.
  • Sinon: Sinon is a neat library for spies, stubs and mocks. Whenever you have to make sure that a function has been called with certain arguments or whenever you want to returned mocked data from an endpoint, Sinon will be your solution to make it happen.
  • Enzyme: Enzyme was introduced by Airbnb for component tests in React. You can render components in isolation (unit tests) with the shallow function or in their context (integration test) by rendering their child components as well with the mount or render functions. The rendered components can use selectors and other functions to access elements, props or state of the components. In addition, it’s possible to simulate events on buttons or input fields. Enzyme is only used to render components, access things and simulate events. Chai (but also as you will see Jest), can be used to make the assertions for it.
  • Jest: Jest was introduced by Facebook for component tests in React as well. In addition, it introduced the mentioned snapshot tests for React components. Jest is not only a testing library for snapshot tests, but also comes with its own test runner (whereas Mocha would have been used before) and assertion functions (whereas Chai would have been used before). So if you want, you can omit Mocha and Chai and use Jest solely with Enzyme.
  • Cypress: Cypress is an E2E testing framework. You can run your tests in the browser or command line. When running it in the browser, Cypress offers lots of functionality for you to debug your tests. You can capture screenshots and videos with it, mock data from third-party APIs and run it in a continuous integration environment too.
  • Storyboard/Loki: The storybook for React can be used to render components in their different states. UI/UX related people, but also developer, can use it to make sure that every components behaves correctly in their different states. It can even be used as style guide for your application. Loki works on top of storybook for screenshot testing your components.

These where all the testing libraries that can be used in your React application nowadays.

Comments

  1. Namrita soni

    We are using cypress and that is very cool. Thanks for this information.

Your email address will not be published.