React Jest 无法从“node_modules/@mui/styled-engine/node/index.js”中找到模块“@emotion/styled”

Question

嗨，我有一个 Storybook 应用程序，我正在尝试添加一些笑话测试：

这是我的 jest.config.js

module.exports = {
  roots: ["<rootDir>/src"],
  verbose: true,
  preset: "ts-jest",
  transform: {
    "^.+\\.(j|t)sx?$": "babel-jest",
    "^.+\\.(ts|tsx)?$": "ts-jest",
  },
  transformIgnorePatterns: [
    "/node_modules/(?![@autofiy/autofiyable|@autofiy/property]).+\\.js$",
    "/node_modules/(?![@autofiy/autofiyable|@autofiy/property]).+\\.ts$",
    "/node_modules/(?![@autofiy/autofiyable|@autofiy/property]).+\\.tsx$",
  ],
  modulePathIgnorePatterns: ["/cache", "/cypress", "/dist"],
  moduleNameMapper: {
    "\\.(css)$": "identity-obj-proxy",
  },
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
  testEnvironment: "jsdom",
  coverageReporters: ["json", "lcov", "text", "clover", "cobertura"],
  reporters: ["jest-junit"],
};

这是我的组件：

import { Box } from "@mui/material";
import React from "react";
import IGlobalComponent from "@app/storybook/src/interfaces/IglobalComponent";

export interface RectangleProps extends IGlobalComponent {
  color: string;
  width?: number;
  height?: string;
  name?: string;
  widthUnit?: string;
  heightUnit?: string;
}

export default function Rectangle(props: RectangleProps) {
  const {
    color,
    width = "3.77",
    height = "4.4",
    widthUnit = "%",
    heightUnit = "rem",
  } = props;
  return (
    <Box
      sx={{
        backgroundColor: color,
        width: width + widthUnit,
        height: height + heightUnit,
      }}
    />
  );
}

还有我的测试文件：

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

describe("Rectangle component", () => {
  test("should be render", () => {
    render(<Rectangle color="red" />);
  });
});

我在这个脚本上运行我的测试：

"test": "cross-env BABEL_ENV=test jest --ci --reporters=default --reporters=jest-junit --coverage",

我有一个错误：无法从“node_modules/@mui/styled-engine/node/index.js”中找到模块“@emotion/styled”

怎么了？

Answer 1

尝试npm install @mui/material @emotion/react @emotion/styled从MUI 文档安装 @mui/material @emotion/react @emotion/styled。