What is the best testing framework for ReactJS?

0
14
What is the best testing framework for ReactJS?

I am not sure if there exists a “best” testing framework. Personally, I often use a combination of testing solutions to build a robust React application.

 If you want to go in depth by setting these solutions up yourself and using them, feel free to checkout the mentioned guide.

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.

What are the testing tools that you can use for these test types? Let’s go through the following list:

  • 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 describe block 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 API (https://www.robinwieruch.de/what-is-an-api-javascript/)s 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. If you are interested to learn about the setup process, their usage and running them in a CI environment, checkout the guide which I mentioned in the beginning.

Recommendation:

I would recommend to use Jest along with Enzyme for unit/integration/snapshot tests. Since Jest comes with its own Test Runner and Assertion functionalities, it makes Mocha and Chai obsolete. After all, you might don’t want to add tons of testing tools for your application. In addition, I would use Cypress for E2E tests.

LEAVE A REPLY

Please enter your comment!
Please enter your name here