模块别名无法解决（CRA和custom-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

Okey，我找到了答案。 我们需要在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"
    }
  },