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

我正在使用Jest和酶来测试我的应用程序。我得到一个错误：

 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"
  }

“开玩笑”：{
“详细”：正确，
“全球”：{
“环境”：{
“isProd”：错误，
“isDev”：没错，
“命令”：“开始”
}
},
“moduleNameMapper”：{
“\\（css）$”：“标识对象代理”
},
“moduleFileExtensions”：[
“js”，
“jsx”，
“json”，
“css”
],
“模块路径”：[
“/app”
],
“模块目录”：[
“节点_模块”
],
“详细”：正确，
“设置文件”：[
“/setupJest.js”
],
“SetupTestFrameworkScript文件”：“/setupTests.js”
}

我在安装应用程序时遵循了指南，我发现

identity obj proxy

将有助于模拟css模块功能，但在我的情况下，这不起作用。请让我知道我错过了什么

---

另外，这不是关于ES6模块的导入。诉讼失败是因为css中有一个

@import

。

所以，我找到了这个问题的解决方案。我在导入CSS时没有在我的组件中添加扩展名，Jest把导入和JS文件混淆了。解决方案不是导入css，如：

import * as styles from './styles'

您应该像这样导入它：

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

---

我很快就找到了这个。如果您有一个jest.config.js文件，那么您需要在该配置文件中设置moduleNameWrapper。

从2018年2月起更新使用创建react应用程序的用户。 您无法覆盖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"
  }
}

module.exports={
...,
“moduleNameMapper”：{
“\ \（jpg | jpeg | png | gif | eot | otf | webp | svg | ttf | woff | woff2 | mp4 | webm | wav | mp3 | m4a | aac | oga |）$”：“/（uu mocks |/uu/fileMock.js，
“\\（scss | sass | css）$”：“身份对象代理”
}
}

它可以很好地跳过scss文件和@import

我向devDependencies添加了身份obj代理

---

支持我的回答，我遵循了

我知道这篇文章很旧，但我通过添加

jest-transform-css

作为一种依赖性解决了这个问题

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

然后在

jest.config.js

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

---

有关更多信息，请参阅此部分。

@elbecita该问题是关于ES6模块导入的，可通过

babel jest

解决。这是关于css模块的导入。如果你看到同样的东西，你能删除可能重复的标志吗？是的，对不起，我读得太快了。这有帮助吗？这家伙有一个错误，因为在一个更少的文件中有一个@import，但这听起来真的像是你的问题吗？基本上，解决方案是创建一个空模块，并告诉jest，对于任何css文件，它都应该使用该空模块。（因为“identity obj proxy”似乎不起作用）。@elbecita

identity obj proxy

是添加模拟文件的高级解决方案。签出注释在回答中，这家伙通过使用相同的插件解决了他的问题。如果在@import语句中包含扩展（.css）是否有效？这也解决了我的问题。我只需将

“moduleNameMapper”：{“\\（css | jpg | png | svg）$”：“path/to/JestMockModule.js”}，

改为

“moduleNameMapper”：{“\\（s？css | jpg | png | svg）$”：“path/to/JestMockModule js”}，

。只有两个字符解决了我的问题。