How can I ignore "-!svg-react-loader!./path/to/my.svg" when testing with Jest without bundling everything with webpack

Question

We're using svg-react-loader for some of the SVG files in our application. We're trying to setup jest to run with a babel-jest and the following .babelrc:

{
  "presets": [
    "es2015", 
    "react"
  ],
  "plugins": [
    "transform-decorators-legacy", 
    "transform-class-properties",
    "transform-object-rest-spread"
  ]
}

The following test fails:

/* global it, document */
import React from 'react'
import ReactDOM from 'react-dom'
import Comp from './Icon'

it('renders without crashing', () => {
  const div = document.createElement('div')
  ReactDOM.render(<Comp><div /></Comp>, div)
})

With error: Cannot find module '-!svg-react-loader!../../assets/grid.svg' from 'Icon.js'

How could I ignore imports that start with like import grid from '-!svg-react-loader!../../assets/grid.svg' in jest?

Answer 1

The way I solved this was by adding a jest mock for any import that contains -!svg-react-loader! at the beginning of the module.

"moduleNameMapper": {
   "^-!svg-react-loader.*$": "<rootDir>/config/jest/svgImportMock.js"
}

Where svgImportMock.js is:

'use strict';
module.exports = 'div';

It's not ideal, because the file could simple not exists, but the assumption is that we see the missing module when bundling with webpack.

Answer 2

I resolved this by installing jest-svg-transformer, then adding this config:

{ "jest": { "transform": { "^.+\\.svg$": "jest-svg-transformer" } } }

Answer 3

I was able to solve this by correctly handling static assets in Jest (https://jestjs.io/docs/en/webpack#handling-static-assets):

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

// __mocks__/styleMock.js

module.exports = {};

// __mocks__/fileMock.js

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