Testing

One of the benefits of building a Gatsby project is the ability to add automated tests for your components, APIs, pages, and more. With Gatsby, you can employ modern tooling like Jest and Cypress (or other tools of your choosing) to build a robust React web application.

This section covers common tools and setup instructions for adding testing functionality to your Gatsby project.

How to set up Jest for unit testing

Unit testing protects against unexpected behavior in your code. Walk through a few extra steps you'll need to set up Jest, a popular Javascript testing framework, with Gatsby.

How to test React components

Install and use react-testing-library, the most popular framework for testing the behavior of React components.

How to test components that use GraphQL

Mocking syntax and testing the output of components that get their data from GraphQL.

How to test CSS-in-JS

Use snapshot serializers to ensure that presentational components built using styled-components or emotion render correctly when given different inputs

How to do visual testing with Storybook

Storybook is a component explorer,

How to write end-to-end tests with Cypress

End-to-end testing enable automated checks that specific user flows through one or many pages work as expected.