Vue Jest 中 SCSS 的 SyntaxError答案

【问题标题】：SyntaxError for SCSS in Vue JestVue Jest 中 SCSS 的 SyntaxError
【发布时间】：2020-07-05 13:29:12
【问题描述】：

我正在尝试在 Jest 中导入和安装一个组件。不幸的是，我遇到了一个错误说明

styles/variables.scss:2
$blue:#324157;
      ^

SyntaxError: Invalid or unexpected token

以下是对我不起作用的解决方案。

使用 identity-obj-proxy（没用）：

"moduleNameMapper": {
  "\\.(css|scss|sass|less)$": "identity-obj-proxy"
}

使用 styleMock（不起作用）：

//package.json
"moduleNameMapper": {
  "\\.(css|scss|sass|less)$": "<rootDir>/tests/__mocks__/styleMock.js"
}

//<rootDir>/tests/__mocks__/styleMock.js
module.exports = {}

以下解决方案不起作用，错误仍然存在。

【问题讨论】：

标签： javascript vue.js sass jestjs

【解决方案1】：

我找到了另一种解决方案，只需在jest.transform 中添加jest-transform-stub 即可帮助其他人

"jest": {
  "transform": {
    ".+\\.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2)$": "jest-transform-stub"
  }
}

来源：vuejs/vue-test-utils-jest-example/issues/11

【讨论】：