jest怎么配置识别webpack的路径别名？

Question

webpack有如下配置

config.resolve.alias['@'] = resolve('src')

使用了@后，jest在遇到后，会无法正确解析路径，然后我搜索了下，说是在jest.config.js中做如下配置

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

我参照上面的上面的代码,修改如下

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

却仍然无法正常解析路径，请问哪里错了吗？

Answer 1

最后在package.json里面配置解决，注意jest要放在前面，这里放在name后面的第一个

  "name": "react_demo",
  "jest": {
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    }
  },

Answer 2

你的jest.config.js里的moduleNameMapper的配置写错了，这样写就正常了：

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

Answer 3

你要先定义rootDir

// jest.config.js
const path = require('path')

module.exports = {
  rootDir: path.join(__dirname, 'src'),
  moduleNameMapper: {
    '@/(.*)$': '<rootDir>/$1.js',
  },
}

Answer 4

const path = require('path')

module.exports = {
    rootDir: path.join(__dirname, 'src'),
    // 运行 jest 的时候寻找测试文件的路径
    testMatch: ['**/__tests__/**/*.[jt]s?(x)'],
    // 忽略
    testPathIgnorePatterns: ['/node_modules/', '/packages/'],
    // 包含
    collectCoverageFrom: [
        'src/**/*.{js,jsx,ts,tsx,vue}',
        '!**/demo/**',
    ],
    // 测试文件中导入文件的后缀，配置.vue
    moduleFileExtensions: [
      'js',
      'ts',
      'json',
      // 告诉 Jest 处理 *.vue 文件
      'vue'
    ],
    // 转换：通过正则配置匹配的文件，交给哪个模块处理
    transform: {
      // 用 vue-jest 处理 *.vue 文件
      '.*\\.(vue)$': 'vue-jest',
      // 用 babel-jest 处理 js
      '.*\\.(js)$': 'babel-jest',
      "^.+\\.tsx?$": "ts-jest"
    },
    // 支持源代码中相同的 @ -> src 别名
    moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/$1",
        "^~/(.*)$": "<rootDir>/$1"
    },
    testURL: "http://localhost/"
  }