Category: Uncategorized

Like other development frameworks, Gatsby isn’t free of bugs, whether they are attributable to developer error or something upstream in the framework. At various points in the Gatsby development experience, you might run into unexpected problems with static builds, rendering, the build process itself, the Gatsby cache, or asynchronous lifecycle methods. Gatsby also offers a…

Visual testing and unit testing both permit small-scale observation of how quality changes over time across individual Gatsby components and pages. However, there are often situations where, as a Gatsby developer, it will be desirable to perform end-to-end (e2e) testing that involves not only single pages and components but navigating through an entire Gatsby site with multiple pages and…

Though unit testing is powerful for situations where you need to maintain functional parity over time, sometimes a visual testing approach can be even more fruitful for maintaining a high-quality Gatsby implementation. One tool that has become popular for visual inspection and testing of JavaScript components is Storybook, a development environment for UI components that allows developers…

The @testing-library/react library includes several helpers on top of react-dom and react-dom/test-utils to aid in ensuring that whenever the implementation (though not the functionality) of your component evolves, your tests won’t break. If you followed the steps in the previous section to install and configure Jest, you can pick up right here. Otherwise, check to ensure that you have Jest installed and…

If you inspect the package.json file that is generated by the Gatsby blog starter, you’ll find that there’s already an NPM script available known as test—but it simply outputs an error message, as you can see in the following example: To ensure that this NPM script instead runs Jest unit tests that you’ve created, you need to modify the…

Though a comprehensive accounting of writing Jest tests is outside the scope of this section, let’s write a rudimentary unit test that checks to make sure that our Gatsby blog starter correctly renders the expected <Bio /> component (src/components/bio.js) that is found in the starter. First, we need to create a new directory within the same directory as…

Let’s walk through a typical Jest test suite built for a Gatsby site. This will demonstrate a standard configuration of Jest that integrates seamlessly with Gatsby’s build process. To begin, we’ll spin up a new version of the Gatsby blog starter: Jest requires us to install several dependencies. We need to install babel-jest and babel-preset-gatsby in order to ensure that the Babel presets…

Unit testing refers to the concept of testing and evaluating the quality of each unit of functionality made available by an implementation—in this case, a Gatsby site. Though Gatsby doesn’t offer a unit testing framework out of the box for efficiency reasons, Gatsby developers can use Jest to power unit testing with a minimal amount of…

Gatsby enables unit testing—testing that evaluates atomic units of functionality—with limited additional setup through Jest. The Jest framework can be used on its own for snapshot testing—testing that compares visual states of the application to track regressions in the user experience—and in conjunction with other libraries for unit testing of React components and components containing GraphQL queries. But…

Once your Gatsby implementation is complete, you’ll often find that you need to troubleshoot some issues before you can deploy your site to production. In Gatsby, it’s possible to do test-driven development (TDD) by writing unit tests in Jest and performing tests on various aspects of the development experience. Even with a robust test architecture, however, sometimes…