在使用Jest进行测试时,我如何忽略“-!SVG-Reactive-Loader!./path/to/my.svg”而不将所有东西捆绑在webpack中?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (547)

对于应用程序中的一些SVG文件,我使用SVG-Reactive-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”中的网格开头的导入?

提问于
用户回答回答于

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

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

svgImportMock.js

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

这并不理想,因为文件可能简单不存在,但现在假设是我们在捆绑webpack时是会看到缺少的模块。

用户回答回答于

我通过安装jest-svg-transformer,然后添加此配置:

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

扫码关注云+社区

领取腾讯云代金券