使用 jest 和 css-modules 测试 React 组件时出错

Question

我正在尝试使用 jest、react、redux 测试我的组件，但我不断收到以下错误：

 ● Test suite failed to run
        stream-react-redux/src/containers/App/App.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.app {

    SyntaxError: Unexpected token .

我已按照有关如何添加 identity-obj-proxy 和配置我的 .jestrc 文件的说明进行操作，但我不断收到相同的错误。当我开始使用 css-modules 并将它们导入我的组件时，问题就来了

这是我的 .jestrc:

{
  "moduleFileExtensions": [ "js", "jsx"],
  "moduleNameMapper": {
    "\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "^.+\.(css)$": "identity-obj-proxy"
  },
  "transform": {
    "^.+\.(js|jsx)$": "babel-jest"
  },
  "verbose": true
}

我还在 .babelrc 文件中添加了 ["es2015", { "modules": false } ]。

Answer 1

我查看了 Jest 文档，为了清楚起见，您是否安装了 identity-obj-proxy？

npm install --save-dev identity-obj-proxy

此外，我看到 Jest 文档中推荐的文件正则表达式是

"\.(css|less)$": "identity-obj-proxy"

可以尝试切换你的匹配。

最后，你可以试试 jest-css-modules

这样的 jest 插件

https://github.com/justinsisley/Jest-CSS-Modules

Answer 2

所以在尝试了所有方法之后，我仍然遇到同样的错误。

我刚刚注意到，当我在 .jestrc 文件中指定我的配置时，我的测试由于 .css 而停止，但是当我从 package.json 执行时，一切正常.

编辑

#package.json


  "jest": {
    "moduleNameMapper": {
      "\.css$": "identity-obj-proxy"
    }, 
    "transform": {
      "\.js$": "babel-jest"
    }

使用 jest 和 css-modules 测试 React 组件时出错

Error when testing react components with jest and css-modules

reactjs

jestjs

css-modules

enzyme