我有一个jest的问题,无论我做什么,它总是试图将css文件解析为javascript。
使用webpack正确构建文件。
对于jest,我有以下配置
"jest": {
"rootDir": "./src",
"moduleNameMapper": {
"^.*[.](css|CSS)$": "../jest/styleMock.js"
}
},
我还尝试了一个脚本预处理器来从导入中剥离css:
"jest": {
"rootDir": "./src",
"scriptPreprocessor": "../node_modules/jest-css-modules"
},
它一直抛出错误。
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.button {
^
SyntaxError: Unexpected token .
5条答案
按热度按时间nc1teljy1#
最好的解决方案是在Jest配置中使用
moduleNameMapper
行,如described in the Jest docs。package.json
中的最小“ignore css”jest配置可能如下所示那么styleMock.js就是这样
xsuvu9jc2#
我不知道这是否是最好的方法,但考虑到我已经被困在这里一段时间,我张贴的解决方案。
为了修复它,我必须做两个步骤:
1)@Jonathan Stray解决方案,因此添加一个指向js模拟的
moduleNameMapper
(更多细节请参见他的回复)2)然后我必须安装
jest-css-modules-transform
插件,并将其添加到package.json
内部的jest配置中,如下所示:70gysomp3#
我使用的是“jest-css-modules-transform”,效果很好。
1.我必须安装jest-css-modules-transform插件:
或者用Yarn
1.然后将其添加到jest.config.s中的jest配置中,如下所示:
eyh26e7m4#
你试过babel CLI吗?
在我的预处理器中,我使用
babel-core
和babel-core->utils
中的canCompile
函数来转换我的代码,并且忽略除了.js、.es、.jsx等之外的其他文件。也许你的代码也没有被转换,这就是为什么你有
SyntaxError
(babel.transform)?axzmvihb5#
通过遵循官方文档,我能够更新我的styleMock以使用代码语法。
第一个月
__mocks__/styleMock.js