在使用Jest进行测试时，我怎么能忽略"-!svg-react-loader!./path/to/my.svg“，而不将所有内容都绑定到webpack
在使用Jest进行测试时，我怎么能忽略"-!svg-react-loader!./path/to/my.svg“，而不将所有内容都绑定到webpack
提问于 2017-10-05 18:56:41
我们对应用程序中的一些SVG文件使用svg-react-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'
我怎么能忽略以jest中的'-!svg-react-loader!../../assets/grid.svg'中的导入网格开头的导入呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-10-06 16:34:39
我解决这个问题的方法是为模块开头包含-!svg-react-loader!的任何导入添加一个jest模拟。
"moduleNameMapper": {
"^-!svg-react-loader.*$": "<rootDir>/config/jest/svgImportMock.js"
}其中，svgImportMock.js是：
'use strict';
module.exports = 'div';这不是很理想，因为文件可能不存在，但假设我们在与webpack捆绑时看到了缺少的模块。
Stack Overflow用户
发布于 2018-08-08 08:32:56
我通过安装jest-svg-transformer，然后添加以下配置解决了这个问题：
{ "jest": { "transform": { "^.+\\.svg$": "jest-svg-transformer" } } }
Stack Overflow用户
发布于 2020-06-18 15:18:41
我能够通过正确处理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';页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46583986
复制相关文章
相似问题
腾讯云开发者
