Question

我正在使用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功能，但这不适用于我的情况。请让我知道我在这里失踪了什么。

P.S。这是关于不是ES6模块的导入。诉讼失败，因为css中有@import。

Answer 1

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

import * as styles from './styles'

你应该像以下一样导入它：

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

Answer 2

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

Answer 3

从2018年2月开始使用 create-react-app 的

UPDATE。您不能在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

Answer 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以获得更多信息

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

4 个答案: