babel-plugin-module-resolver不支持jest

Question

Babel别名适用于测试文件本身，但不适用于vue文件中的导入。

我像error when jest try import file in vue file一样也会犯错误

我将moduleNameMapper添加到jest配置中，但只有当我删除babel-plugin-module-resolver并在webpack中添加别名时，它才能工作。这个解决方案不适合我，因为我们所有的项目都有相同的方式来表示别名

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

recovery.test.js

import { wrap } from '~/utils/test';
import recovery from '~/popup/router/pages/recovery/recovery';
import captcha from '~/components/captcha/captcha';
import ELInput from 'element-ui/lib/input';

recovery.vue

import punycode from 'punycode';
import { mapActions, mapState } from 'vuex';
import captcha from '~/components/captcha/captcha';
import { RECOVERY_PASSWORD, RECOVERY_PASSWORD_SUCCESS, RECOVERY_PASSWORD_FAILURE         
} from '~/store/recovery/events';
import ssid from '~/mixins/ssid';
import { w3cValidateEmail, getConfig } from '~/helpers/index';

.babelrc

{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    ["module-resolver", {
        "alias": {
          "~": "./src"
        }
    }]

  ],
  "presets": [
    ["@babel/preset-env", {
        "useBuiltIns": "usage",
        "targets": {
            "browsers": ["> 0.25%", "not ie 11", "not op_mini all"]
        }
    }]
  ],
  "env": {
    "test": {
      "presets": [
        ["env", { "targets": { "node": "current" }}]
      ]
    }
  }
}

jest.config.js

module.exports = {
setupFiles: [
    "./jest.setup.js"
],
moduleFileExtensions: [
    "js",
    "vue"
],
transform: {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
testPathIgnorePatterns: [
    '<rootDir>/initTest.js', 
    '<rootDir>/utils',
    '<rootDir>/node_modules'
],
testMatch: [
    "**/*.test.js"
],
collectCoverage: true,
collectCoverageFrom: [
    "**/src/components/**/*.vue",
    "**/src/options/**/**/*.vue",
    "**/src/helpers/index.js",
    "**/src/popup/router/pages/**/**.vue",
],
coveragePathIgnorePatterns: [
    "src/popup/router/pages/Index.vue"
],
coverageThreshold: {
    global: {
        statements: 50,
        branches: 20,
        lines: 50,
        functions: 40,
    },
},
};

Answer 1

我刚刚解决了这个问题，所以这里是问题的原因和我的解决方案，如果有人在搜索这个问题时遇到了这个问题。

真正的问题是什么？

.babelrc module-resolver覆盖jest moduleNameMapper

工作解决方案：

你可以在除测试之外的任何NODE_ENV中使用babel模块解析器，所以我们只在运行jest测试时使用moduleNameMapper。

我们可以通过将.babelrc转换为.babelrc.js并检查来自process.env的NODE_ENV来实现这一点，如果它等于测试，则不要将module-resolver推送到插件。