Please enable JavaScript.
Coggle requires JavaScript to display documents.
10. ABOUT TESTING AND DEBUGGING (MOCHA (chai, chai-spies, jsdom), Testing…
10. ABOUT TESTING AND DEBUGGING
We want to be able to run the tests with Node and the console. To do that we cannot render the components using ReactDOM, because it needs the browser's DOM =>
react-addons-test-utils
TestUtils
library has functions to shallow render components or render them into a detached DOM outside the browser. It gives us some utility functions to reference the nodes rendered in the detached DOM so that we can make assertions and expectations on their values
Testing React components
Shallow rendering
Mounting the components into a detached DOM
In order to test a browser event, we have to render our component into a detached DOM. Rendering a component into a real DOM would require a browser but Jest comes with a special DOM in which we can render our components using the console
We have to create a special function called
mock
(or spy, depending on the framework) that behaves like a real function but has some special properties. For example, we can check if it has been called and, if so, how many times and with which parameters
MOCHA
chai
chai-spies
jsdom
Enzyme
- The API is nicer, similar to jQuery, and it provides many useful utilities to interact with components, their states, and their properties
React tree Snapshot Testing
Snapshots are pictures of the component with some props at a given point in time. Every time we run the tests, Jest creates new pictures and it compares them with the previous ones to check if something has changed
react-test-renderer
Code coverage tools
Istanbul
Testing Higher-Order Components
The Page Object pattern
In React, if one single component throws an exception, it stops rendering the entire tree. This is a decision made to improve safety and avoid inconsistent states
react-component-errors