这是我的代码(只是一个非常基本的设置)。所有文件都在同一个文件夹中。
我使用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";
但都不管用
请帮帮我
2条答案
按热度按时间wztqucjr1#
我遇到了同样的问题,我可以通过将
diagnostics
设置为false
来解决它顺便说一下,我使用
babel-jest
为moduleNameMapper
j8yoct9x2#
我也遇到了同样的问题,Mehdi的回答不起作用,“globals”被弃用。
但要努力: