Using Jest with Gatsby

fileMock.js

// in __mocks__/
// Jest file stub

module.exports = "test-file-stub";

gatsby-link.js

// in __mocks__/
import React from "react";

const mockComponent = name => props =>
  React.createElement(name, props, props.children);

export default mockComponent("MockedLink");

jest.config.js

module.exports = {
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|svg|woff|woff2)$": "<rootDir>/__mocks__/fileMock.js",
    // Plain CSS - match css files that don't end with '.module.css' https://regex101.com/r/VzwrKH/4
    "^(?!.*\\.module\\.css$).*\\.css$": "<rootDir>/__mocks__/styleMock.js",
    // CSS Modules - match files that end with 'module.css'
    "\\.module\\.css$": "identity-obj-proxy" // CSS modules
  },
  setupFiles: ["<rootDir>/src/utils/tempRafShim.js"],
  testPathIgnorePatterns: ["/node_modules/", "<rootDir>/.cache/"],
  globals: {
    __PATH_PREFIX__: ""
  }
};

styleMock.js

// in __mocks__/
// Jest CSS mock

module.exports = {};

tempRafShim.js

// in utils/
// TODO: Remove this `raf` polyfill once jest v21.3.0 is released
global.requestAnimationFrame = callback => {
  setTimeout(callback, 0);
};