我正在尝试将开玩笑和酶添加到React WebPack项目中。
一切都在起作用,直到我将测试添加到组件,并带有样式表,导入Google字体。
我遇到的错误是:
● Test suite failed to run
/Users/dev/Code/Git/react-redux-webpack/src/App.sass:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed')
^
SyntaxError: Invalid or unexpected token
SASS文件看起来像:
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed')
body
background: #f9f9f9
color: #444444
font-family: 'Barlow Condensed', sans-serif
text-align: center
.container
width: 100%
max-width: 960px
margin: 0 auto
.container__logo--image
position: absolute
top: 50%
left: 50%
margin-left: -75px
margin-top: -75px
我的.babelrc:
{
"presets": [
"react",
"stage-0",
[
"env",
{
"targets": {
"node": "6.10",
"browsers": ["last 2 versions", "safari >= 7"]
}
}
]
],
"plugins": ["transform-class-properties"]
}
我有WebPack中所有必需的装载机,我可以整天构建和服务Sass,没有任何问题。这是我正在挣扎的开玩笑的引入。
我已经在此处推了一个具有当前代码状态的分支
我添加了以下内容。
"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|sass)$": "<rootDir>/__mocks__/styleMock.js"
}
},
并在模拟文件夹中添加以下内容:
filemock.js
module.exports = 'test-file-stub';
StyleMock.js
module.exports = {}
由于没有由webpack汇编,因此应以测试导入的静态资产以某种方式处理。
典型的方法包括嘲笑它们,因为与测试目的无关。玩笑公开了一个moduleNameMapper
选项,可以轻松模拟/代理他们。
@harry给出的答案,
如果您使用的是jest.config.js
文件,请添加它而不是package.json
moduleNameMapper: {
'\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/src/__mock__/fileMock.js',
'\.(css|less)$': '<rootDir>/src/__mock__/styleMock.js',
},