In my jsconfig.json, I defined the following paths:
{
"compilerOptions": {
...
"paths": {
"@/*": ["src/*"].
"@unit/*": ["test/unit/*"]
},
...
}
However, when running my unit tests using Karma, I get errors related to the module imports that use those path aliases:
ERROR in /test/unit/specs/utilityFunctions.spec.js 8:49-90
Module not found: Error: Can't resolve '@unit/utils/sanitizeSpaceChars' in 'C:\Dev\my-project\test\unit\specs'
I have the following folder structure
- test
- unit
- specs
- utilityFunctions.spec.js
- utils
- sanitizeSpaceChars.js
- index.js
- karma.conf.js
Here's my karma.conf.js:
const webpackConfig = require('@vue/cli-service/webpack.config.js')
const path = require('path')
module.exports = (config) => {
config.set({
browsers: ['ChromeHeadless'],
customLaunchers: {
HeadlessChrome: {
base: 'ChromeHeadless',
flags: ['--no-sandbox'],
},
},
frameworks: ['mocha', 'chai', 'webpack'],
plugins: [
'karma-webpack',
'karma-mocha',
'karma-chai-plugins',
'karma-chrome-launcher',
'karma-sinon-chai',
'karma-sourcemap-loader',
'karma-spec-reporter',
'karma-coverage',
],
reporters: ['spec', 'coverage'],
files: [
'./index.js',
{
pattern: '../../src/static/img/**/*.+(jpg|jpeg|gif|png|svg)',
watched: false,
included: false,
served: true,
nocache: false,
},
],
proxies: {
'/static/img': absolutePath,
},
preprocessors: {
'./index.js': ['webpack', 'sourcemap'],
},
webpack: {
...webpackConfig,
devtool: 'inline-source-map',
},
webpackMiddleware: {
noInfo: true,
},
coverageReporter: {
dir: './coverage',
reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text-summary' }],
},
})
What am I missing? I cannot find anything online about any other specific setting to make my unit tests recognize my path aliases.
After better understanding the webpack.config.js, I found that the path aliases being used were coming from there. It was set to the following:
{
...
"resolve": {
"alias": {
"@": "C:\\...\\src",
"vue$": "vue/dis/vue.runtime.esm.js"
"@/*": "C:\\...\\src\\*",
"@unit/*": "C:\\...\\test\\unit\\*"
}
},
...
}
For some reason, "@unit/*" was not good enough for karma-webpack so I had to add another alias "@unit" in the karma.conf.js and that resolved the error. Note that the relative path was set to C:\...\test\unit
I think because that is where the karma.conf.js file is located, so I had to set the path based on that:
const webpackConfig = require('@vue/cli-service/webpack.config.js')
webpackConfig.resolve.alias['@unit'] = path.resolve(__dirname, './')
...
module.exports = function karmaConfig(config) {
config.set({
...
webpack: {
...webpackConfig,
devtool: 'inline-source-map',
},
...
})
}