Within my Vue configuration, the following code snippet can be found:
configureWebpack: {
resolve: {
alias: {
react: path.resolve(__dirname, 'composition/react'),
hooks: path.resolve(__dirname, 'composition'),
},
},
},
In one of my components, I have the following import statement:
import { useEffect, useState } from 'react';
This allows me to reuse some of my Vue code in React projects. While this setup works fine during project execution and building, it fails when running tests. Specifically, while unit testing, I encounter the error:
Cannot find module 'react' from 'useCategories.js'Looking at my jest.config.js file, it contains the following configuration:
module.exports = {
preset: '@vue/cli-plugin-unit-jest',
transform: {
'^.+\\.vue$': 'vue-jest'
}
}
If the unit tests in Vue are not respecting the values specified in vue.config.js, then how can I ensure that the webpack path resolve values are properly set for testing purposes? I would prefer not to duplicate these settings, but if necessary, perhaps importing them from the same file in different configurations could be a potential solution.