CSS 模块 @import 未能通过 Jest 测试套件

Question

我正在使用 Jest 和 Enzyme 来测试我的应用程序。我收到错误：

\n\n

 FAIL  app/containers/Navbar/NavbarContainer.test.js\n  \xe2\x97\x8f Test suite failed to run\n\n    app/components/Navbar/styles.css: Unexpected token (1:0)\n      > 1 | @import "../../styles/base/_variables";\n          | ^\n        2 |\n        3 | .navbar{\n        4 |   width: $navbar-width;\n

\n\n

这是我在 package.json 中的 Jest 配置：

\n\n

"jest": {\n    "verbose": true,\n    "globals": {\n      "env": {\n        "isProd": false,\n        "isDev": true,\n        "command": "start"\n      }\n    },\n    "moduleNameMapper": {\n      "\\\\.(css)$": "identity-obj-proxy"\n    },\n    "moduleFileExtensions": [\n      "js",\n      "jsx",\n      "json",\n      "css"\n    ],\n    "modulePaths": [\n      "/app"\n    ],\n    "moduleDirectories": [\n      "node_modules"\n    ],\n    "verbose": true,\n    "setupFiles": [\n      "./setupJest.js"\n    ],\n    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js"\n  }\n

\n\n

我在设置应用程序时遵循了指南，我发现这identity-obj-proxy将有助于模拟 css-modules 功能，但这在我的情况下不起作用。请让我知道我在这里缺少什么。

\n\n

PS 这不是 ES6 模块导入。诉讼失败是因为@importcss中有一个。

\n

Answer 1

更新从 2​​018 年 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 。

我添加到 devDependency 中identity-obj-proxy

支持我的答案我关注了jest webpack