Home

Awesome

jest-preset-gatsby

Build Status npm version Mentioned in Awesome Jest

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

License

Copyright Kepler Sticka-Jones 2019-2021. Licensed MIT