This is a summary of the most used frameworks for testing 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 set up properly and all test files are reached in your project. Last but not least, they give the structure of your tests by offering functions for your test. A describe block is used to describe a test suite (e.g. for a component or function) and its 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 return 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 component behave correctly in their different states. It can even be used as a style guide for your application. Loki works on top of a storybook for screenshot testing your components.
I believe that the most useful framework that covers most of the testing techniques is Jest and along with Enzyme (adds additional functionality to Jest but is not necessary to use them together) are enough for the purposes of our project.
This is a summary of the most used frameworks for testing 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 set up properly and all test files are reached in your project. Last but not least, they give the structure of your tests by offering functions for your test. A describe block is used to describe a test suite (e.g. for a component or function) and its 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 return 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 component behave correctly in their different states. It can even be used as a style guide for your application. Loki works on top of a storybook for screenshot testing your components.
I believe that the most useful framework that covers most of the testing techniques is Jest and along with Enzyme (adds additional functionality to Jest but is not necessary to use them together) are enough for the purposes of our project.