deprecated-packages/gatsby-recipes/recipes/cypress.mdx
Gatsby and Cypress can be used together seamlessly (and should be!). Cypress enables you to run end-to-end tests on your client-side application, which is what Gatsby produces.
First, we'll want to install Cypress and additional dependencies.
This recipe:
Adds dependencies to your package.json, including a useful package gatsby-cypress. gatsby-cypress exposes additional Cypress functionality which makes Gatsby and Cypress work together just a bit more nicely. You'll see that later with your first test after running this recipe.
Creates a local cypress folder with two sub-folders, support and plugins. It automatically includes all the gatsby-cypress utilities, which you can use in your first test.
<File
path="cypress/plugins/index.js"
content={https://gist.github.com/KyleAMathews/a88885cf6a52b8a0c654319ab544d958/raw/b434660dd8b695eca3b38bf1b40303c705c1aec5/plugins-index.js}
/>
<File
path="cypress/support/index.js"
content={https://gist.github.com/KyleAMathews/a88885cf6a52b8a0c654319ab544d958/raw/b434660dd8b695eca3b38bf1b40303c705c1aec5/support-index.js}
/>
Runs a test that intentionally fails so you can practice fixing it.
<File
path="cypress/integration/home-page/home-page.js"
content={https://gist.github.com/KyleAMathews/a88885cf6a52b8a0c654319ab544d958/raw/b434660dd8b695eca3b38bf1b40303c705c1aec5/home-page-home-page.js}
/>
Adds two scripts for running a Cypress test. 1) start-server-and-test: This spins up a local Gatsby development server and "waits" until it's live so we can then run our tests and 2) test:e2e: This is the command you'll use to run your tests.
<NPMScript name="develop" command="gatsby develop" />
<NPMScript name="cy:open" command="cypress open" />
<NPMScript name="test:e2e" command="start-server-and-test develop http://localhost:8000 cy:open" />
After installing this recipe, you can run the following command in your terminal.
npm run test:e2e
Now you'll have a way to run and validate your Cypress tests with the dream-team combo of Gatsby and Cypress.