Unable to load *.vue files using karma and karma-typescript

Question

I am new to karma, karma-typescript, webpack, and vue. I have been successfull with building a fully functional application using vue-cli, but I am at the point where I would like to write some unit tests against my components. (I know, I know TDD).

Anyways, on to my question. I have tried using webpack, jest, karma, and jasmine. And have spent almost 2 days trying to figure this out. I have been successful with creating a spec.ts file and have it transpiled using karma-typescript to js file, however that spec file is unable to import any application *.vue files.

I was able to produce a webpack.config.js using "vue inspect" and created a webpack.config.js file locally within the root of the project.

karma.conf.js

// Karma configuration
var webpackConfig = require('./webpack.config.js');

const puppeteer = require('puppeteer');
process.env.CHROME_BIN = puppeteer.executablePath();
module.exports = function (config) {
    config.set({
        // Paths
        basePath: 'full path to application', // root(/) was not working ./ was not working , so I use full path to application
        exclude: [],
        files: [
            { pattern: 'src/test/*.spec.ts', type: 'module', watch: false }
        ],
        preprocessors: {
            "src/test/*.ts": 'typescript'//  "karma-typescript"
        },
        typescriptPreprocessor: {
            options: {
                sourceMap: true, // (optional) Generates corresponding .map file.
                target: 'es6', // (optional) Specify ECMAScript target version: 'ES3' (default), or 'ES5'
                module: 'es6', // (optional) Specify module code generation: 'commonjs' or 'amd'
                noImplicitAny: true, // (optional) Warn on expressions and declarations with an implied 'any' type.
                noResolve: true, // (optional) Skip resolution and preprocessing.
                removeComments: true, // (optional) Do not emit comments to output.
                concatenateOutput: false, // (optional) Concatenate and emit output to single file. By default true if module option is omited, otherwise false.
                "moduleResolution": "node",
                "paths": {
                    "@/*": [
                        "/src/*"
                    ]
                }
            },
            // transforming the filenames
            transformPath: function (path) {
                return path.replace(/\.ts$/, '.js');
            }
        },
        // Module processing
        //preprocessors: {
        //     //Process all *test* modules with webpack 
        //     //(it will handle dependencies)
        //    'src/**/*.vue': ['vue-loader']
        //},
        /* OTHER CONFIGURATION */
        // Webpack config
        webpack: webpackConfig,
        webpackMiddleware: {
            stats: 'errors-only',
        },
        browsers: ['Chrome'],
        reporters: ['dots', 'kjhtml'],
        logLevel: config.LOG_INFO,
        colors: true,
        frameworks: ['jasmine', 'karma-typescript'],
        plugins: [
            'karma-typescript',
            'karma-typescript-preprocessor',
            'karma-jasmine',
            'karma-chrome-launcher',
            'karma-jasmine-html-reporter'
        ],
        port: 9876,
        autoWatch: true,
        singleRun: false,
        concurrency: Infinity
    });
};

tsconfig.js

{
  "compilerOptions": {
    "noEmit": true,
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

I did try to add my webpack.config.js to this post but exceeds character count. But it is default from vue inspect

Also as I understand it would also be possible to accomplish the same thing using 'webpack' instead of karma-typescript, but when I use webpack console freezes at Error: 0 of 0 OR doesn't open chrome to run the tests and hangs after this line: 09 08 2019 12:20:49.095:INFO [compiler.karma-typescript]: Compiling project using Typescript 3.1.1 09 08 2019 12:20:52.338:INFO [compiler.karma-typescript]: Compiled 20 files in 3188 ms.

The exact error I receive from console when trying to import vue files inside my spec.ts Chrome 77.0.3844 (Windows 10.0.0) ERROR An error was thrown in afterAll TypeError: Failed to resolve module specifier "@vue/test-utils". Relative references must start with either "/", "./", or "../". Chrome 77.0.3844 (Windows 10.0.0) ERROR An error was thrown in afterAll TypeError: Failed to resolve module specifier "@vue/test-utils". Relative references must start with either "/", "./", or "../".

Any help is much appreciated, and sorry for long post.