Jest 和 SCSS 变量答案

【问题标题】：Jest and SCSS variablesJest 和 SCSS 变量
【发布时间】：2024-01-11 08:17:01
【问题描述】：

我在我的项目中使用了 Jest，但遇到了一个包含 SCSS 变量的测试。

$grey-light: #C7C7C7;

我收到这个 Jest 错误：

Jest 遇到了意外的令牌

它指向前面提到的代码行。

【问题讨论】：

你在编译你的scss代码吗？确保您使用的是编译后的 css 而不是 scss 文件
我没有编译 scss 代码，只需要在需要时导入即可。顺便说一句，这是一个 React 项目。
scss 不是有效的 css，浏览器不知道如何读取它。需要先编译，这样会生成css文件，然后可以导入生成的css文件。
其实我的 scss 正在编译。这是一个包含 webpack、babel 等的 React 项目。浏览器获取编译后的 css。唯一的问题是 Jest。
我用来编译的库是：sass-loader

标签： javascript sass jestjs

【解决方案1】：

我也遇到了这个问题，通过使用 identity-obj-proxy 包解决了：

https://github.com/keyz/identity-obj-proxy

只需按照 Jest 文档中的说明进行操作即可：

https://jestjs.io/docs/en/webpack#mocking-css-modules

并且应该在.scss 文件导入语句方面没有问题地运行测试。您所要做的就是在您的 package.json 文件中包含 jest 配置：

{
  "name": "...",
  "version": "0.0.0",
  "description": "...",
  "main": "index.js",
  "scripts": {
    "start": "webpack --config webpack.config.js",
    "test": "jest"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(css|scss|less)$": "identity-obj-proxy"
    }
  },
  "keywords": [],
  "author": "Homer Jay",
  "license": "MIT",
  "devDependencies": {},
  "dependencies": {}
}

.scss 导入将按预期工作，任何变量或 mixin 都不会引发错误。

【讨论】：

【解决方案2】：

Sass 帮助您编写更有条理和可维护的代码，但它不是有效的 css 代码，因此浏览器不知道如何阅读它。

scss文件需要编译成css，需要导入css文件并使用。例如，您定义的参数具有#C7C7C7 值。编译器将用该值替换该参数，因此最终的 css 将仅包含硬编码值

【讨论】：