Enable Cypress hot-reload in Gatsby

In my quest to dive deeper into code testing, I started using Cypress with Gatsby and have been enjoying the process so far. One thing was missing though: the ability for Cypress to automatically re-run its tests after modifying a Gatsby file.

By default Cypress re-runs if a change has been made to the test files, but not to the actual React content. Luckily, a plugin covers exactly this use case: cypress-app-watcher-preprocessor​

To do, install the plugin

1yarn add cypress-app-watcher-preprocessor

Then add the following lines to "./cypress/plugins/index.js"

1const watchApp = require("cypress-app-watcher-preprocessor")
2
3module.exports = (on, config) => {
4  // `on` is used to hook into various events Cypress emits
5  // `config` is the resolved Cypress config
6  on("file:preprocessor", watchApp())
7}

You should now be able to run yarn cypress open and see your tests auto-reload on code change