Testing gatsby blog with cypress.io

In this blog post, I will write about configuring Cypress.io to work with Gatsby.js based blog.

Let's start by installing required packages from npm (I assume that you have already installed gatsby):

npm install --save-dev cypress start-server-and-test

also make sure to add the following scripts to package.json:

{
"scripts": {
"dev": "gatsby develop", // or other script to run your development server
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"test:e2e:ci": "start-server-and-test dev http://localhost:8000 cypress:run"
}
}

After that, you need to tell cypress your gatsby.js site baseUrl by specifying it inside cypress.json in the root of your project:

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

If you then run npm run cypress:open and wait a little bit when cypress is verifying itself (if you are on OSX) after a while, you should see a cypress dashboard with a welcoming message. You can close it.

Dashboard
Dashboard with e2e test

When you look into your files you may see that there is a new folder called cypress created. This is the place where you gonna store your e2e tests. For now, I recommend keeping cypress/integration/main.spec.ts/js. Inside this file you can start writing your first test:

it('should render the home page', () => {
cy.visit('/');
cy.contains('YOUR PAGE CONTENT'); // change it to your content
});

If you want to add typescript support create cypress/tsconfig.json:

{
"compilerOptions": {
"strict": true,
"baseUrl": "../node_modules",
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress"]
},
"include": ["**/*.ts"]
}

You are now ready to run your first test 🎉. You can start by running npm run dev and when gatsby development server is on, switch to the other terminal tab and execute npm run cypress:run. Your tests should start - if they fail you can see screenshots & videos inside: cypress/videos and cypress/screenshots. I recommend adding those paths to gitignore.

Output
Headless e2e test run output

You may spot test:e2e:ci inside package.json scripts. It is used to run cypres on my PRs using github actions:

jobs:
steps:
- uses: actions/checkout@v1
- name: Use Node.js $NaN
uses: actions/setup-node@v1
with:
node-version: $NaN

- run: npm ci
- run: npm run lint
- run: npm run tsc
- run: npm run test:e2e:ci
env:
CI: true

There is also already made github-action. To use it you have to add following entry in your workflow file (under jobs section):

cypress-run:
runs-on: ubuntu-16.04
steps:
- uses: actions/checkout@v1
- uses: cypress-io/github-action@v1
with:
start: npm run dev
wait-on: 'http://localhost:8000'
browser: chrome
headless: true

A full example of config is here.

That's all. I don't have many e2e tests - I'm using them as a way to check if dependency updates made by Dependabot not only pass TypeScript compilator but if they do not break rendering of my blog.

Summary

In this blog post, I presented a way to use Cypress.io to test Gatsby.js blog. You can find how it works in action inside my blog repository.

Update 2020-03-11

Webmentions

Stats

Likes: 0, Reposts: 0