Gatsby and Cypress can be used together seamlessly (and should be!). [Cypress](https://cypress.io) 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.

<NPMPackage name="cypress" dependencyType="development" />
<NPMPackage name="gatsby-cypress" dependencyType="development" />
<NPMPackage name="start-server-and-test" dependencyType="development" />

---

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.