React项目测试时无法解析@assets路径别名问题求助

问题根源 #

你在tsconfig.json里配置了@assets/*的路径别名，项目运行时Webpack能识别这个映射，但react-scripts test调用的Jest默认不会读取TSConfig的paths配置，导致测试阶段找不到对应的资源模块。

解决方案 #

以下是两种实用的解决方式，任选其一即可：

方式一：用Craco配置（推荐，无需eject项目） #

1. 安装依赖

npm install @craco/craco --save-dev

2. 修改package.json中的脚本命令，替换原有react-scripts命令：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
}

3. 在项目根目录创建craco.config.js，添加路径别名映射：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@assets': path.resolve(__dirname, 'assets/')
    }
  },
  jest: {
    configure: {
      moduleNameMapper: {
        '^@assets/(.*)$': '<rootDir>/assets/$1'
      }
    }
  }
};

方式二：直接配置Jest（无需额外依赖） #

在项目根目录的package.json中添加Jest配置项，或者单独创建jest.config.js文件：

• 方案A：修改package.json

{
  "jest": {
    "moduleNameMapper": {
      "^@assets/(.*)$": "<rootDir>/assets/$1"
    }
  }
}

• 方案B：创建jest.config.js

module.exports = {
  moduleNameMapper: {
    '^@assets/(.*)$': '<rootDir>/assets/$1'
  }
};

验证 #

配置完成后，重新运行npm test，即可正常识别@assets开头的导入语句。

内容的提问来源于stack exchange，提问作者Rajath