DEV Community

Krzysztof Żuraw
Krzysztof Żuraw

Posted on • Originally published at krzysztofzuraw.com on

1

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.js):

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.

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/videosand cypress/screenshots. I recommend adding those paths to gitignore.

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 ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - run: npm ci
    - run: npm run lint
    - run: npm run tsc
    - run: npm run test:e2e:ci
      env:
        CI: 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.

Retry later

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Retry later