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

Question

我们正在为应用程序中的一些 SVG 文件使用 svg-react-loader。我们正在尝试使用 babel-jest 和以下 .babelrc:

将 jest 设置为运行

{
  "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'

我怎么能忽略以 import grid from '-!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';

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

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

jestjs

babel-jest