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

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

 FAIL  app/containers/Navbar/NavbarContainer.test.js
  ● Test suite failed to run

    app/components/Navbar/styles.css: Unexpected token (1:0)
      > 1 | @import "../../styles/base/_variables";
          | ^
        2 |
        3 | .navbar{
        4 |   width: $navbar-width;

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

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

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

附：这是关于非 ES6 模块导入的问题。诉讼失败是因为有一个@import in css.

更新谁使用创建反应应用程序从 2018 年 2 月开始。 你不能覆盖 package.json 中的 moduleNameMapper 但在 jest.config.js 中它可以工作，不幸的是我还没有找到任何关于它为什么能做到这一点的文档。 所以我的笑话配置.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身份对象代理

支持我的回答我遵循开玩笑的网页包 https://jestjs.io/docs/en/webpack