Skip to content

Instantly share code, notes, and snippets.

@DSchau
Last active April 10, 2020 15:56
Show Gist options
  • Save DSchau/ec8035ec7d74d32c019b08d1757119ce to your computer and use it in GitHub Desktop.
Save DSchau/ec8035ec7d74d32c019b08d1757119ce to your computer and use it in GitHub Desktop.
Gatsby + Cypress recipe

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={` // *********************************************************** // 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 } `.trim()} />

<File path="./cypress/support/index.js" content={import 'gatsby-cypress' // custom commands? // import './commands'.trim()} />


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={` 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') }) }) `.trim()} />

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment