[Vuejs]-Correct way to mock webpack "externals" (i.e. jquery) in Vue unit tests (using mocha)

by

0👍

Using Vue.js (as I see you’ve tagged your question thus), I created my own vue.config.js as is shown below.

Basically, it marks jquery as an external in development/production mode, and resolves it to a mocked version in test mode.
Creating a mocked-up version of jquery I’ll leave to you though. This example was adapted from a project that uses a different library.

const path = require('path');

module.exports = {
  configureWebpack() {
    const isTest = process.env.NODE_ENV === 'test';

    let resolve;
    let externals = { jquery: 'jquery ' };

    if (isTest) {
      externals = {};

      resolve = {
        alias: {
          // you may have to fiddle around with this path, from the point of view of where jquery is imported
          jquery: './tests/helpers/fakeJQuery.js',
        }
      };
    }

    return {
      resolve,
      externals,
    };
  },
};

Leave a comment