vue.config.js 单元测试中未使用 configureWebpack (vue 3)

Question

在我的 vue 配置中，我有以下内容：

configureWebpack: {
  resolve: {
    alias: {
      react: path.resolve(__dirname, 'composition/react'),
      hooks: path.resolve(__dirname, 'composition'),
    },
  },
},

在我的组件中有以下内容：

import { useEffect, useState } from 'react';

这样我就可以在 React 项目中重新使用一些 Vue 代码。这在运行和构建项目时有效，但在测试时无效。单元测试时出现错误：Cannot find module 'react' from 'useCategories.js'，上面的导入来自 useCategories.

下面是jest.config.js中的：

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  transform: {
    '^.+\.vue$': 'vue-jest'
  }
}

如果 vue 中的单元测试忽略了 vue.config.js 中的值，那么我该如何设置用于测试的 webpack 路径解析值。我宁愿不重复这些值，但如果它是一个 JavaScript 文件，我想我可以从不同配置的同一个文件导入它。

Answer 1

Webpack 未在 Jest 中使用，这会使模块测试不切实际，因此 Webpack 配置不会影响任何内容。

正如the documentation所解释的，有必要在 Jest 配置中提供模块映射，例如：

moduleNameMapper: {
  '^react$': '<rootDir>/composition/react',
  ...

vue.config.js 单元测试中未使用 configureWebpack (vue 3)

vue.config.js configureWebpack not used in unit tests (vue 3)

javascript

vue.js

vue-test-utils

vuejs3