模块别名无法解析笑话（CRA 和customize-cra）

Question

我使用 CRA 创建一个 React 应用程序并添加react-app-rewired并TypeScript 映射一些模块tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@constants/*": ["constants/*"],
      "@components/*": ["components/*"],
      "@grid/*": ["components/Grid/*"],
      "@grid-share/*": ["components/Grid/Share/*"],
      "@utils/*": ["util/*"],
      "@services/*": ["Services/*"]
    }
  },
  "extends": "../tsconfig.json"
}

并将它们定义为别名模块config-overrides.js

const path = require('path');
const { override,  addBabelPlugins } = require('customize-cra');   
module.exports = override(
  ...addBabelPlugins(
    [
      'module-resolver',
      {
        root: ["./src"],
        alias: {
          "@constants": "./src/constants",
          "@components": "./src/components",
          "@grid": "./src/components/grid",
          "@utils": "./src/util",
          "@services": "./src/Services",
          "@grid-share": "./src/components/Grid/Share"
        }
      }
    ],
  ),
);

一切都很好，yarn start但是对于yarn test，它无法解析定义的模块。我应该怎么做才能解析别名模块jest？

Answer 1

好吧，我找到了答案。我们需要在 package.json 中定义相同的模块别名

 "jest": {
    "moduleNameMapper": {
      "@constants/(.*)": "<rootDir>/src/constants/$1",
      "@utils/(.*)": "<rootDir>/src/util/$1",
      "@grid-share/(.*)": "<rootDir>/src/components/Grid/Share/$1",
      "@grid/(.*)": "<rootDir>/src/components/Grid/$1"
    }
  },