Getting error while running unit test in Vue (mocha and chai)

19 Views Asked by At

I've recently upgraded my Vue application to webpack 5 and getting the error as shown in the screenshots.

vue.config.js after upgrading the application to webpack 5:

when I run test command, it gives me Runtime Error

RUNTIME EXCEPTION Exception occurred while loading your tests

I also tried adding fullySpecified: false as found in webpack documentation but it did not change anything.

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const path = require('path');
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
const PreloadPlugin = require('@vue/preload-webpack-plugin');

const fileName = process.env.NODE_ENV === 'test' ? 'assets/[name].[ext]' : 'assets/[name].[hash:8].[ext]';


const ParserPlugin = new PreloadPlugin({
  rel: 'preload',
  as(entry) {
    if (/\.css$/.test(entry)) return 'style';
    if (/\.woff2$/.test(entry)) return 'font';
    return 'script';
  },
  include: 'allAssets',
  fileWhitelist: [/\.woff2(\?.*)?$/i, /\/(vue|vendor~app|chunk-common|submission)\./],
});

module.exports = {
  publicPath: '/',
  filenameHashing: true,
  css: {
    sourceMap: true,
    loaderOptions: {
      css: {
        url: false,
      }
    },
  },

  chainWebpack: (config) => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    // Added in webpack 5 as type is broken
    svgRule.delete('type');
    svgRule.delete('generator');
    // Handles global import of Scss variables

    config.module
      .rule('file')
      .test(/\.(csv|xlsx|xls)$/)
      .use('file-loader')
      .loader('file-loader')
      .end();
    config.module
      .rule('url')
      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .end();
    if (process.env.NODE_ENV === 'test') {
      config.merge({
        target: 'node',
        devtool: 'eval',
      });
    }
  },

  configureWebpack: {
    resolve: {
      modules: ['node_modules'],
      extensions: ['.js', '.vue'],
      alias: {
        ...
      },
      fullySpecified: false,
    },
    plugins: [
      ParserPlugin,
      new FriendlyErrorsWebpackPlugin(),
      new CompressionWebpackPlugin(),
    ].filter(Boolean),
  },
};

0

There are 0 best solutions below