运行测试时使用 syled-engine 分辨率来反应 Material UI 问题（在服务/构建时工作）

Question

我正在使用 mui.com Material UI 组件，并带有

styled-components

，而不是默认的

emotion

。

我已更新我的 tsconfig.json 以包含

"compilerOptions": {
    ...,
    "paths": {
      ...,
      "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
    }

现在，当我使用

webpack-dev-server

或

webpack build

时，它会得到正确解决

但是当我运行测试时，我收到以下错误

  ● Test suite failed to run

    Cannot find module '@emotion/styled' from '../../node_modules/@mui/styled-engine/node/index.js'

    Require stack:
      C:/LearningProjects/tech-events-uk/node_modules/@mui/styled-engine/node/index.js
      C:/LearningProjects/tech-events-uk/node_modules/@mui/system/index.js
      C:/LearningProjects/tech-events-uk/node_modules/@mui/material/node/styles/adaptV4Theme.js
      C:/LearningProjects/tech-events-uk/node_modules/@mui/material/node/styles/index.js
      C:/LearningProjects/tech-events-uk/node_modules/@mui/material/node/index.js
      src/lib/event-card/event-card.tsx
      src/lib/event-card/event-card.spec.tsx

      at Resolver.resolveModule (../../node_modules/jest-runtime/node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (../../node_modules/@mui/styled-engine/node/index.js:45:38)

我认为可能缺少一些笑话配置，并且不太熟悉与

npm

而不是

yarn

一起使用的笑话配置

参考： https://mui.com/guides/styled-engine/

Answer 1

将其添加到我的

jest.config.js

中就成功了：

module.exports = {
    moduleNameMapper: {
        '^@mui/styled-engine$': '<rootDir>/node_modules/@mui/styled-engine-sc',
    },
};

Answer 2

我的和埃德温的答案一样，但没有

<rootDir>/node_modules/

module.exports = {
    moduleNameMapper: {
        '^@mui/styled-engine$': '@mui/styled-engine-sc',
    },
};