Category: 11. Debugging And Testing Gatsby

Getting a Gatsby site ready to go live in production isn’t just a matter of putting the finishing touches on implementation. During the development process, it’s often the case that small bugs or larger issues creep into code that can stymie even the best-planned development cycle. For this reason, Gatsby provides a robust set of…

For Gatsby developers who are used to previous paradigms of JavaScript programming, the introduction of specific syntax for asynchronicity into JavaScript may be a rude awakening. As of Node.js v8, Node.js can natively handle the async and await keywords, which are used to identify functions that should be treated asynchronously but are written as if they were synchronous. The async and await keywords are…

Gatsby contains its own internal cache that is used to accelerate plugin handling, and especially the data sourcing process. Sometimes the Gatsby cache can fail, manifesting in strange and perhaps silent errors involving stale content, where the most up-to-date content doesn’t display despite an upstream content update, and recent modifications to plugin code that don’t appear…

Gatsby performs server-side rendering as part of its build process to facilitate faster page loads on the browser. Hooking into this rendering process involves creating or modifying the gatsby-ssr.js file. One of the server-side rendering APIs commonly leveraged during the build process is the replaceRenderer API, which can be used to customize or otherwise adjust the ways in which Gatsby renders…

Because both the gatsby build and gatsby develop scripts are technically Node.js applications at their core, you can debug issues that occur within the execution of those scripts using commonly available standard approaches and tools for Node.js application development. Using Node.js debugging tools can be useful for situations where you need to identify a problem area in a gatsby-node.js file or another…

Because Gatsby’s static build process ultimately generates a series of HTML files that maximize the speed at which Gatsby sites load in the browser, some issues can be difficult to diagnose. In many cases, issues surrounding static builds involve inaccessible globals or Webpack bundling issues. The Gatsby documentation outlines four specific cases that are common in…

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…