[Jest] Scss "Syntax Error: Invalid or unexpected token" 에러 해결방법

[Jest] Scss "Syntax Error: Invalid or unexpected token" 에러 해결방법

Jest에서 감지할 필요가 없는 scss파일에 접근해서 발생한 에러입니다. 굳이 Jest에서 파악할 필요가 없는 파일들은 패스하면 됩니다.

 /Users/ruden/Desktop/development/2022/test/src/components/Progressbar/progressbar.scss:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){@import '../../styles/variables.scss';
                                                                                      ^

    SyntaxError: Invalid or unexpected token

    > 1 | import "./progressbar.scss";
        | ^
      2 |
      3 | class Progressbar {
      4 |   private percent = null;

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/components/Progressbar/Progressbar.ts:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.148 s
Ran all test suites related to changed files.

yarn add --dev identity-obj-proxy

// jest.config.js
module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  moduleNameMapper: {
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
      "identity-obj-proxy",
  },
};

해당 세팅을 적용했음에도 불구하고 계속 에러가 발생한다면, vscode를 재부팅해보세요!

PASS src/components/Progressbar/Progressbar.test.ts
  Progressbar
    ✓ start method (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.886 s, estimated 2 s
Ran all test suites related to changed files.