用 Antd 和 React 开玩笑“意外的令牌”

Question

当我将 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 () => {

笑话配置.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
}

Answer 1

默认情况下，Jest 不会转换 node_modules，转换所有第三方模块会导致大量开销和意外结果。因此 Antd .css 文件不会被转换jest-transform-stub并且无法导入，因为它们不是有效的 JS 文件。

所有排除情况都需要在以下位置指定transformIgnorePatterns：

"transformIgnorePatterns": [
  "node_modules/(?!(antd)/)"
]

它有可能缩小到antd/lib/style/。