Reactjs Jest找不到SCSS模块

Reactjs Jest找不到SCSS模块,reactjs,sass,jestjs,create-react-app,css-modules,Reactjs,Sass,Jestjs,Create React App,Css Modules,这是我的代码(只是一个非常基本的设置)。所有文件都在同一文件夹中。 我正在使用createreact应用程序 User.tsx: import React from "react"; import styles from "./User.module.scss"; const User: React.FC = () => { return <div className={styles.user}>User</div>; }; export default U

这是我的代码(只是一个非常基本的设置)。所有文件都在同一文件夹中。
我正在使用
createreact应用程序

User.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;
@import "scss/abstracts";

.user {
  color: $dark_theme_color;
}
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();
});
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"
  }
};
User.test.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;
@import "scss/abstracts";

.user {
  color: $dark_theme_color;
}
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();
});
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"
  }
};
jest.config.js:

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

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

export default User;
@import "scss/abstracts";

.user {
  color: $dark_theme_color;
}
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();
});
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"
  }
};
module.exports={
根:[“/src”],
转换:{
“^.+\.tsx?$”:“ts笑话”
},
SetupFileAfterEnv:[
“@testing library/react/cleanup after each”,
“@testing library/jest-dom/extend-expect”
],
testRegex:“(/\uuuu tests./**(\\.\124;/)(test | spec))\\\\.tsx?$”,
moduleFileExtensions:[“ts”、“tsx”、“js”、“jsx”、“json”、“节点”],
模块映射:{
“^.+\.模块\(css | sass | scss)$”:“标识obj代理”
}
};
我尝试了谷歌搜索结果前两页的几乎所有解决方案,如:

  • 使用
    \uuuumocks\uuuu/styleMock.js
  • jest.mock(“./User.module.scss”)
  • jest transform css
  • jest css模块转换
  • jest css模块
  • import*作为样式来自“/User.module.scss”
  • 增加了
    声明模块“*.scss”
    globals.d.ts
但什么都不管用。
请帮忙