Vue CLI - Karma Unit Tests - Cannot resolve import aliases

Question

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.

Answer 1

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',
    },
    ...
  })
}