Jest.js 找不到SCSS模块

nwlqm0z1  于 2023-09-28  发布在  Jest
关注(0)|答案(2)|浏览(132)

这是我的代码(只是一个非常基本的设置)。所有文件都在同一个文件夹中。
我使用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;

User.module.scss:

@import "scss/abstracts";

.user {
  color: $dark_theme_color;
}

User.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"
  }
};

我已经尝试了几乎所有的解决方案,从前2页的谷歌搜索结果,如:

  • 使用__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";
  • globals.d.ts中添加了declare module "*.scss";

但都不管用
请帮帮我

wztqucjr

wztqucjr1#

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

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

顺便说一下,我使用babel-jestmoduleNameMapper

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

j8yoct9x2#

我也遇到了同样的问题,Mehdi的回答不起作用,“globals”被弃用。
但要努力:

npm install node-sass --save-dev

相关问题