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

Question

我们在我们的应用程序中使用svg-react-loader来处理一些SVG文件.我们正试图设置开玩笑以及一个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的导入添加一个jest 模拟器!在模块的开头.

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

其中svgImportMock.js是:

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

这不是理想的,因为文件可能很简单,但是假设我们在与webpack捆绑时看到了丢失的模块.