我正在使用Jest和Enzyme来测试我的应用程序。我收到错误:
FAIL app/containers/Navbar/NavbarContainer.test.js
● Test suite failed to run
app/components/Navbar/styles.css: Unexpected token (1:0)
> 1 | @import "../../styles/base/_variables";
| ^
2 |
3 | .navbar{
4 | width: $navbar-width;
这是我在package.json中的Jest配置:
"jest": {
"verbose": true,
"globals": {
"env": {
"isProd": false,
"isDev": true,
"command": "start"
}
},
"moduleNameMapper": {
"\\.(css)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx",
"json",
"css"
],
"modulePaths": [
"/app"
],
"moduleDirectories": [
"node_modules"
],
"verbose": true,
"setupFiles": [
"./setupJest.js"
],
"setupTestFrameworkScriptFile": "<rootDir>/setupTests.js"
}
我在设置应用程序时遵循指南,我发现identity-obj-proxy
将有助于模拟css-modules功能,但这不适用于我的情况。请让我知道我在这里失踪了什么。
附:这是关于不是ES6模块的导入。诉讼失败,因为在css中有一个@import
。
所以,我找到了解决这个问题的方法。我在我的组件中导入了没有扩展名的CSS,Jest将这个导入与JS文件混淆。解决方案是代替导入css,如:
import * as styles from './styles'
你应该导入它像:
import * as styles from './styles.css'
我发现了一个快速的问题。如果你有一个jest.config.js文件,那么你需要在该配置文件中设置你的moduleNameWrapper。
更新谁使用来自2018年2月的create-react-app。您不能覆盖package.json中的moduleNameMapper,但是在jest.config.js中它可以工作,不幸的是我还没有找到任何关于它为什么会这样做的文档。所以我的jest.config.js看起来像这样:
module.exports = {
...,
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(scss|sass|css)$": "identity-obj-proxy"
}
}
它可以很好地跳过scss文件和@import。
我添加到devDependencies identity-obj-proxy
支持我的回答我跟着jest webpack