Awesome

jest-preset-gatsby

Preset for testing Gatsby sites using Jest, based off the official documentation on testing Gatsby with Jest. Compatible with both JavaScript and TypeScript codebases.

Warning: Does Not Include gatsby module mocks.

Installation

Install preset using npm:

npm install --save-dev jest-preset-gatsby

or yarn:

yarn add --dev jest-preset-gatsby

Usage

Configure Jest to use the preset in jest.config.js:

module.exports = {
  preset: "jest-preset-gatsby",
};

or package.json:

{
  "jest": {
    "preset": "jest-preset-gatsby"
  }
}

Using in a TypeScript Project

This preset also includes a preset for TypeScript projects; configure Jest to use it in jest.config.js:

module.exports = {
  preset: "jest-preset-gatsby/typescript",
};

or package.json:

{
  "jest": {
    "preset": "jest-preset-gatsby/typescript"
  }
}

Mocking Gatsby Module

This package does not include mocks for the gatsby module. In order to sufficiently test your project your should probably mock the gatsby module, add the following at __mocks__/gatsby.js if you're in need of one:

const React = require("react");
const gatsby = jest.requireActual("gatsby");

module.exports = {
  ...gatsby,
  graphql: jest.fn(),
  Link: jest.fn().mockImplementation(
    // these props are invalid for an `a` tag
    ({
      activeClassName,
      activeStyle,
      getProps,
      innerRef,
      partiallyActive,
      ref,
      replace,
      to,
      ...rest
    }) =>
      React.createElement("a", {
        ...rest,
        href: to,
      })
  ),
  StaticQuery: jest.fn(),
  useStaticQuery: jest.fn(),
};

Related Packages

jest-runner-prettier - Use Jest to check your codebase against prettier
jest-runner-stylelint - Use Jest to check your styles with stylelint
jest-runner-eslint - Use Jest to check your code with eslint
jest-raw-loader - Load the raw content of files in Jest, replicating the behavior of webpack's raw-loader