我怎能无视“！ - SVG的反应装载机./路径/到/ my.svg”不，我们使用的是与的WebPack

Question

捆绑一切与玩笑测试时，SVG-反应装载机对于一些SVG文件在我们的应用中。我们正在努力建立开玩笑到了巴贝尔，笑话和下列.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-反应装载机../../资产/ grid.svg！”？

Answer 1

我解决这个问题的方法是通过增加一个笑话嘲笑为包含任何进口 - ！SVG反应的装载机！在模块的开头。

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

凡svgImportMock.js是：

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

它的效果并不理想，因为该文件可能不是简单的存在，但前提是，我们看到了失踪模块的WebPack捆绑时。