Vue Jest中SCSS的SyntaxError

Question

我正在尝试在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 = {}

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

Answer 1

我找到了另一种解决方案，可以通过在jest-transform-stub中添加jest.transform

来帮助其他人。

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

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