如何解决与Antd和React开玩笑说“意外令牌”
将Jest与Antd,React和Parcel结合使用时出现以下错误。 Jest抱怨Antd css文件。在默认情况下,Jest是否应该包括node_modules?如果没有,是否可以排除它?
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse,e.g. it's not > plain JavaScript.
{ProjectPath}/node_modules/antd/lib/style/index.css:5
.ant-modal,^
SyntaxError: Unexpected token '.'
8 |
9 |
> 10 | export default () => {
jest.config.js
{
"jest": {
"setupFilesAfterEnv": [
"<rootDir>src/setupTests.js"
],"transform": {
"^.+\\.js$": "babel-jest",".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
}
}
}
.babelrc
{
"presets": [
"@babel/preset-react","@babel/preset-env"
],"plugins": [
[
"import",{
"libraryName": "antd","style": "css"
}
]
]
}
.lessrc
{
"javascriptEnabled": true
}
解决方法
Jest默认情况下不会转换node_modules,转换所有第三方模块将导致大量开销和意外结果。因此,Antd .css文件不会被jest-transform-stub
转换,并且由于它们不是有效的JS文件而无法导入。
所有排除项都需要在transformIgnorePatterns
中指定:
"transformIgnorePatterns": [
"node_modules/(?!(antd)/)"
]
可以将其范围缩小到antd/lib/style/
。
您在测试期间使用jest-transform-stub
模拟进口资产是正确的,但是Jest不会申请node_modules
。因此,请使用选项moduleNameMapper
使其同样适用:
"moduleNameMapper": {
"^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。