CSS模块@import无法通过Jest测试服 [英] CSS module @import fails the Jest test suit

问题描述

我正在使用Jest和Enzyme来测试我的应用程序.我收到错误消息:

I am using Jest and Enzyme to test my application. I am getting error:

 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配置:

This is my Jest configuration in package.json:

"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功能，但是在我的情况下不起作用.请让我知道我在这里想念什么.

I was following the guides while setting up the application, and I found that identity-obj-proxy will help to mock css-modules functionality, but that's not working in my case. Please let me know what am I missing here.

P.S.这与不导入ES6模块有关.诉讼失败，因为CSS中有@import.

P.S. this is about not ES6 modules import. The suit failed because there is a @import in css.

推荐答案

因此，我已经找到了解决此问题的方法.我正在导入组件中不带扩展名的CSS，而Jest则将该导入与JS文件混淆了.解决方案不是导入像这样的css:

So, I've found the solution to this problem. I was importing CSS without the extension in my components and Jest was confusing that import with JS file. Solution is instead of importing css like:

import * as styles from './styles'

您应该以如下方式导入它:

you should import it like:

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

这篇关于CSS模块@import无法通过Jest测试服的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！