当 CSS 使用 @import 时 Jest 失败

Question

试图设置 jest 以使用 css 装饰器。

链接到我的反应组件的 css 文件具有：

@import './another.css'

现在，当我运行 jest 时，我得到：

SyntaxError：/Users/thiagofacchini/Documents/atomix/src/library/atoms/Label/styles.css：当前未启用对实验性语法“decorators-legacy”的支持 (2:1)：

然后我去了我的 .babelrc 并添加了：

   "env": {
    "test": {
      "plugins": [
        "@babel/plugin-proposal-decorators", { "legacy": true },
      ]
    }

再次开玩笑，我明白了

[BABEL] /Users/thiagofacchini/Documents/atomix/src/library/protons/Animator/tests/index.test.js：装饰器插件需要一个“decoratorsBeforeExport”选项，其值必须是一个布尔值。如果要使用遗留装饰器语义，可以设置 'legacy: true' 选项。

（处理时：/Users/thiagofacchini/Documents/atomix/node_modules/@babel/plugin-proposal-decorators/lib/index.js”）

还尝试将我的 .babelrc 更改为：

  "env": {
    "test": {
      "plugins": [
        "@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true ,"legacy": true },
      ]
    }
  }

但得到完全相同的错误。

我的 package.json 看起来像：

"@babel/core": "^7.3.4",
"@babel/plugin-proposal-decorators": "^7.3.0",
"@babel/preset-env": "^7.3.4",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@logux/eslint-config": "^27.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",

注意：错误刚刚发生在 JEST 上，我的开发构建工作正常。

我用谷歌搜索了地狱，但我根本无法理解发生了什么。也许与版本有关？我很感激任何帮助。

Answer 1

当您在开发构建中运行您的应用程序时，构建过程由 webpack/parcel/您使用的任何工具负责。

这些工具允许您（通过使用插件）执行诸如将 css 导入 javascript 之类的操作，然后最终在适当的时间将其作为 css 导出。这不是 javascript 的本机功能。

Jest 在 node js 上运行，它没有 webpack 的所有功能，也不能解析原始 css 等。

所以当你遇到错误时 "SyntaxError: /Users/thiagofacchini/Documents/atomix/src/library/atoms/Label/styles.css: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (2:1):"

这实际上是 nodejs 试图将 css 解析为 javascript！您可以在这里阅读更多关于它的内容https://www.sitepoint.com/javascript-decorators-what-they-are/

那么你如何在你的 jest 环境中管理 css 呢？

在您的笑话配置中，您将其设置为不导入 css 而是导入一个空白模块。

首先 npm install identity-obj-proxy

然后将以下内容添加到您的 jest.config.js

moduleNameMapper: {
    "\\.css$": "identity-obj-proxy",
    "^lodash-es$": "lodash"
},