Jest 和 SCSS 变量

Question

我在我的项目中使用 Jest 并被困在一个包含 SCSS 变量的测试中。

$grey-light: #C7C7C7;

我收到这个 Jest 错误：

Jest 遇到意外令牌

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

Answer 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进口量将如预期和任何变量或混入不会引发错误。