Jest config for testing with Gatsby & SVG files.

jest.config.js

module.exports = {
  collectCoverageFrom: ['./src/**/*.js', '!./src/fixtures/**', '!./src/svg-icons/'],
  moduleNameMapper: {
    '\\.(css|scss)$': '<rootDir>/jest.css.js',
    '\\.svg$': '<rootDir>/jest.svg.js',
  },
  testPathIgnorePatterns: ['/.cache/', '/public/'],
  transform: {
    '\\.jsx?$': '<rootDir>/jest.jsx.js',
  },
};

jest.css.js

/*
  NOTE:

  This file is a no-op.

  This simply allows for a (S)CSS file to
  be imported directly, and have no effect.

  ```
  import './path/to/file.scss';
  ```
*/

module.exports = {};

jest.jsx.js

const { createTransformer } = require('babel-jest');

const options = {
  presets: ['babel-preset-gatsby'],
};

module.exports = createTransformer(options);

jest.svg.js

const React = require('react');
const { forwardRef } = React;

const component = (props = {}, ref = {}) => {
  return <svg ref={ref} {...props} />;
};

const ReactComponent = forwardRef(component);

module.exports = {
  ReactComponent,
  default: 'file.svg',
};