Unit Testing in gatsby using Jest

Jest is basically a unit testing framework which is frequently used in React but
in this post I want to share how you can use jest in gatsby for unit testing. gatsby is the static site generator using this you can create websites in react.

1. Installing dependencies

First you need to install Jest and some more required packages. You need to install Babel 7 as it’s required by Jest.


npm install --save-dev jest babel-jest react-test-renderer identity-obj-proxy babel-core@^7.0.0-bridge.0 @babel/core babel-preset-gatsby

2. Creating a configuration file for Jest

Add this in root folder

jest.config.js

module.exports = {

"transform": {

"^.+\\.jsx?$": "<rootDir>/jest-preprocess.js"

},

"moduleNameMapper": {

".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",

".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"

},

"testPathIgnorePatterns": ["node_modules", ".cache"],

"transformIgnorePatterns": ["node_modules/(?!(gatsby)/)"],

"globals": {

"__PATH_PREFIX__": ""

},

"testURL": "http://localhost",

"setupFiles": ["<rootDir>/loadershim.js"]

}

jest-preprocess.js

const babelOptions = {

presets: ["babel-preset-gatsby"],

}

module.exports = require("babel-jest").createTransformer(babelOptions)

__mocks__/fileMock.js

module.exports = "test-file-stub"

loadershim.js

global.___loader = {

enqueue: jest.fn(),

}

3. Useful mocks to complete your testing environment

Mocking Gatsby

Finally it’s a good idea to mock the gatsby module itself. This may not be needed at first, but will make things a lot easier if you want to test components that use Link or GraphQL.

This mocks the graphql() function, Link component, and StaticQuery component.

__mocks__/gatsby.js

const React = require("react")

const gatsby = jest.requireActual("gatsby")

module.exports = {

...gatsby,

graphql: jest.fn(),

Link: jest.fn().mockImplementation(({ to, ...rest }) =>

React.createElement("a", {

...rest,

href: to,

})

),

StaticQuery: jest.fn(),

}

4.Writing tests

Put test inside test folder with the extension .spec.js or .test.js. 

a) Snapshot test :-

Testing simple page

-- src/pages/samplePage.js

import React from 'react'

const SamplePage = () => (

<div>

<h1>renders correctly</h1>

</div>

)

export default SamplePage

-- test/dummyTest.test.js

import React from "react"

import renderer from "react-test-renderer"

import Bio from "./Bio"

describe("Bio", () => {

it("renders correctly", () => {

const tree = renderer.create(<Bio />).toJSON()

expect(tree).toMatchSnapshot()

})

})

Testing page  wrapped inside component / shallow rendering test 

-- src/pages/page-2.js

import React from 'react'

import { Link } from 'gatsby'

import Layout from '../components/layout'

import SEO from '../components/seo'

const SecondPage = () => (

<Layout>

<SEO title="Page two" />

<h1>Hi from the second page</h1>

<p>Welcome to page 2</p>

<Link to="/">Go back to the homepage</Link>

</Layout>

)

export default SecondPage

-- test/dummyTest.test.js

import React from "react"

import ShallowRenderer from 'react-test-renderer/shallow'

import SecondPage from "../src/pages/page-2"

describe("Test second page render", () => {

it("renders correctly", () => {

const renderer = new ShallowRenderer()

const tree = renderer.render(<SecondPage />)

expect(tree).toMatchSnapshot()

})

})

Running tests

Add jest for the test in package.json file

"scripts": {

"build": "gatsby build",

"develop": "gatsby develop",

"start": "npm run develop",

"format": "prettier --write \"src/**/*.js\"",

"test": "jest"

},

If you want you could also add a script that runs jest --watchAll to watch files and run tests when they are changed.


you can now run tests by typing npm run test


If you make changes that mean you need to update the snapshot, you can do this by running npm run test -- -u.

jest --coverage config can be used to see the whole coverage report.

Find more details here :  https://www.gatsbyjs.org/docs/unit-testing/


Happy Learning :-)