Cypress + Gatsby Recipe

cypress.json

{
  "baseUrl": "http://localhost:8000"
}

home-page.js

describe('My home page', () => {
  beforeEach(() => {
    cy.visit('/')
  })

  /*
   * TODO: make this test work
   */
  it('contains the text hello gatsby', () => {
    expect(cy.getByText('sup')).should('eq', 'Hello Gatsby')
  })
})

plugins-index.js

// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
}

recipe.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.

---

---

Well look at that — we've added dependencies to your package.json and we also installed a useful package gatsby-cypress. gatsby-cypress exposes additional Cypress functionality which makes Gatsby and Cypress work together just a bit more nicely. We'll show that later with our first test, but hold tight for just a bit because first we need to scaffold out some boilerplate files for Cypress.

---

<File path="cypress/plugins/index.js" content={https://gist.githubusercontent.com/DSchau/5b37ac430cc0b795728c7f476d2af6b3/raw/e7e7702c25453d49fa86a2789244cda1816fac8f/plugins-index.js} />

<File path="cypress/support/index.js" content={https://gist.githubusercontent.com/DSchau/5b37ac430cc0b795728c7f476d2af6b3/raw/e7e7702c25453d49fa86a2789244cda1816fac8f/support-index.js} />

<File path="cypress.json" content={https://gist.githubusercontent.com/DSchau/5b37ac430cc0b795728c7f476d2af6b3/raw/e7e7702c25453d49fa86a2789244cda1816fac8f/cypress.json} />

---

Cool cool! So we created a local cypress folder with two sub-folders, support and plugins. We've also automatically included all the nice gatsby-cypress utilities, which we can now use in our first test.

---

<File path="cypress/integration/home-page/home-page.js" content={https://gist.githubusercontent.com/DSchau/5b37ac430cc0b795728c7f476d2af6b3/raw/e7e7702c25453d49fa86a2789244cda1816fac8f/home-page.js} />

---

Our first test! You'll notice it's failing. This is intentional -- we'd like you to run the test and fix it. This raises a question -- how do you run a Cypress test? Easy peasy.

---

---

Nifty! We've added two scripts:

• 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
• test:e2e: This is the command you'll use to run your tests.

Let's give it a try. 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.

support-index.js

import '@testing-library/cypress/add-commands'
import 'gatsby-cypress'
// custom commands?
// import './commands'