reactjs - 开玩笑找不到 SCSS 模块

Question

这是我的代码（只是一个非常基本的设置）。所有文件都在同一个文件夹中。
我正在使用create-react-app.

用户.tsx：

import React from "react";
import styles from "./User.module.scss";

const User: React.FC = () => {
  return <div className={styles.user}>User</div>;
};

export default User;

用户.module.scss：

@import "scss/abstracts";

.user {
  color: $dark_theme_color;
}

用户.test.tsx：

import React from "react";
import { render, getByText } from "@testing-library/react";
import User from "./User";

it("renders correctly", () => {
  const { asFragment } = render(<User />);
  const fragmentElement = asFragment().firstChild as HTMLElement;
  const root = getByText(fragmentElement, "User");

  expect(root).not.toBe(null);
  expect(root).toMatchSnapshot();
});

运行时jest出现此错误：

FAIL  src/pages/User/User.test.tsx
   ● Test suite failed to run

src/pages/User/User.tsx:2:20 - error TS2307: Cannot find module './User.module.scss'.

2 import styles from "./User.module.scss";

jest.config.js：

module.exports = {
  roots: ["<rootDir>/src"],
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  setupFilesAfterEnv: [
    "@testing-library/react/cleanup-after-each",
    "@testing-library/jest-dom/extend-expect"
  ],
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  moduleNameMapper: {
    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
  }
};

我已经尝试了谷歌搜索结果前两页的几乎所有解决方案，例如：

• 使用__mocks__/styleMock.js
• jest.mock("./User.module.scss")
• jest-transform-css
• jest-css-modules-transform
• jest-css-modules
• import * as styles from "./User.module.scss";
• 添加declare module "*.scss";在globals.d.ts

但没有任何效果。
请帮忙。

标签： reactjssassjestjscreate-react-appcss-modules

Answer 1

我遇到了同样的问题，我可以通过设置diagnostics来解决它false

"globals": {
    "ts-jest": {
        "diagnostics": false
    }
}

顺便说一句，我babel-jest用于moduleNameMapper

"moduleNameMapper": {
    "^.+\\.(css|less|scss)$": "babel-jest"
}