Enable Cypress hot-reload in Gatsby

September 30, 2020

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")
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())

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

Next step?

Let's work together!

If you'd like to talk about a project or need advice about product and ideation , simply drop me a message. I'm currently available for development projects, entrepreneurial gigs or speaking events.

You can also find me on:

  • github icon
  • linkedin icon
  • twitter icon

© 2023, Paul Gaumer