我怎能無視「！ - 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捆綁時。