React Jest 无法从 \'node_modules/@mui/styled-engine/node/index.js\' 中找到模块 \'@emotion/styled\'答案

【问题标题】：React Jest Cannot find module '@emotion/styled' from 'node_modules/@mui/styled-engine/node/index.js'React Jest 无法从 \'node_modules/@mui/styled-engine/node/index.js\' 中找到模块 \'@emotion/styled\'
【发布时间】：2023-01-13 00:37:26
【问题描述】：

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

这是我的 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”

怎么了？

【问题讨论】：

标签： javascript reactjs jestjs ts-jest

【解决方案1】：

从 MUI docs 尝试 npm install @mui/material @emotion/react @emotion/styled。

【讨论】：