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

【问题标题】：CSS module @import fails the Jest test suitCSS 模块 @import 未能通过 Jest 测试套件
【发布时间】：2018-06-25 11:34:26
【问题描述】：

我正在使用 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 模块导入。诉讼失败，因为 css 中有一个@import。

【问题讨论】：

@elbecita 这个问题是关于 ES6 模块导入的，可以通过babel-jest 解决。这是关于css-modules 的@imports。如果您看到相同的内容，请删除可能的重复标志吗？
是的，很抱歉，我读得太快了。这可能有帮助吗？ stackoverflow.com/questions/39418555/… 这家伙有错误，因为 @import 在一个较少的文件中，但这听起来真的像你的问题吗？
基本上解决方案是创建一个空模块并告诉 jest 对于任何 css 文件它应该使用该空模块。（因为“identity-obj-proxy”似乎不起作用）。
@elbecita identity-obj-proxy 是添加模拟文件的高级解决方案。检查答案中的 cmets，这家伙通过使用相同的插件解决了他的问题。
在@import 语句中包含扩展名（.css）是否有效？

标签： javascript reactjs jestjs css-modules

【解决方案1】：

更新谁使用 create-react-app 从 2018 年 2 月开始。您不能覆盖 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。

我添加到 devDependencies identity-obj-proxy

支持我的回答，我关注了jest webpack

【讨论】：

这也解决了我的问题。我只需将"moduleNameMapper": { "\\.(css|jpg|png|svg)$": "path/to/JestMockModule.js" }, 更改为"moduleNameMapper": { "\\.(s?css|jpg|png|svg)$": "path/to/JestMockModule.js" },。只需 2 个字符就解决了我的问题。

【解决方案2】：

所以，我找到了解决这个问题的方法。我在组件中导入没有扩展名的 CSS，而 Jest 将导入与 JS 文件混淆了。解决方案不是像这样导入 css：

import * as styles from './styles'

你应该像这样导入它：

import * as styles from './styles.css'

【讨论】：

【解决方案3】：

我发现了一个快速的问题。如果你有一个 jest.config.js 文件，那么你需要在该配置文件中设置你的 moduleNameWrapper。

【讨论】：

【解决方案4】：

我知道这篇文章很旧，但我通过添加 jest-transform-css 作为 devDependency 解决了这个问题

npm i --save-dev jest-transform-css

然后在jest.config.js中添加以下内容

    transform: {
                '^.+\\.js$': 'babel-jest',
                '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css'
    }

你可以参考这个github issue了解更多信息

【讨论】：