3.2 React Tooling

Jest

Jest is a newer JavaScript testing library created by the React team (opens new window). It provides the test runner/reporting framework and an assertion library, replacing both Mocha and Chai. Jest currently has more than 8 million weekly downloads on NPM – likely because it is included in the default project scaffolding created by the create-react-app and the vue create CLI tools.

Jest also includes code coverage analysis, snapshot testing, and tools to simplify creating mocks for external services or libraries.

But, one of the strongest reasons to prefer Jest over Mocha/Chai is the clear failure reporting which includes meaningful stack trace excerpts. This makes it much easier to understand exactly where a test failed and where to fix it.

# Community Support

The Jest community has some really great plugins (opens new window) that can add additional capabilities. Two in particular that I strongly recommend are jest-chain (opens new window) and jest-extended (opens new window).

Also baked into the default project configuration with create-react-app or vue create is the dom-testing-library (opens new window). This works really well with Jest to let you write clean integration tests that let you inspect the rendered DOM. There are official wrappers for most popular frontend frameworks, e.g. React, React Native, Vue, Angular, Svelte. It also integrates with Cypress for end-to-end testing.

The more your tests resemble the way your software is used, the more confidence they can give you. — Kent C. Dodds

# Additional Resources

Getting Started | Jest Docs (opens new window)

Jest cheat sheet (opens new window)

React testing examples (opens new window)

React testing library cheat sheet (opens new window)

Last Updated: : 9/7/2020, 3:25:18 PM