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 teststest: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:e2eNow you'll have a way to run and validate your Cypress tests with the dream-team combo of Gatsby and Cypress.