jestjs - 使用 Jest 进行测试时如何忽略“-!svg-react-loader!./path/to/my.svg”而不将所有内容与 webpack 捆绑

Question

我们对应用程序中的一些 SVG 文件使用 svg-react-loader。我们正在尝试设置 jest 以使用 babel-jest 和以下.babelrc 运行：

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

以下测试失败：

/* 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)
})

有错误： Cannot find module '-!svg-react-loader!../../assets/grid.svg' from 'Icon.js'

我怎么能忽略以“-！svg-react-loader！../../assets/grid.svg”开头的导入网格？

Answer 1

我解决这个问题的方法是为包含-!svg-react-loader 的任何导入添加一个玩笑模拟！在模块的开头。

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

svgImportMock.js在哪里：

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

这并不理想，因为文件可能不存在，但假设我们在与 webpack 捆绑时看到了丢失的模块。

Answer 2

我通过安装解决了这个问题jest-svg-transformer，然后添加了这个配置：

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

Answer 3

我能够通过正确处理 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';