vue.config.js configureWebpack 未在单元测试中使用（vue 3）

Question

In my vue config I have the following:

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

In my component I have the following:

import { useEffect, useState } from 'react';

This is so I can re use some of the Vue code in React projects. This works when running and building the project but not when testing. When unit testing I get the error: Cannot find module 'react' from 'useCategories.js' , the above import is from useCategories.

The following is in the jest.config.js:

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

If unit testing in vue is ignoring values from vue.config.js then how can I set the webpack path resolve values for testing. I would rather not repeat these values but if it's a JavaScript file I guess I can import it from the same file in different configs.

Answer 1

Webpack isn't used in Jest, this would make module testing impractical, so Webpack config cannot affect anything.

As the documentation explains, it's necessary to provide module mapping in Jest config as well, eg:

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