在Vue单元测试中模拟webpack“外部变量”(即jquery)的正确方法(使用mocha)

Question

我有一个Vue项目，它是使用Vue CLI v3.5创建的，正在尝试编写一些组件单元测试。我在vue.config.js中使用jquery作为一个外部的webpack，如下所示：

...
configureWebpack: {
    externals: {
      jquery: 'jQuery'
    }
  }
...

我从index.html中的脚本标记中的CDN加载jquery。显然，每当我运行vue-cli-service test:unit时，我都会得到以下错误，因为jquery不是项目中的依赖项：

 RUNTIME EXCEPTION  Exception occurred while loading your tests

ReferenceError: jQuery is not defined
    at Object.jquery (.../public/webpack:/external "jQuery":1:1)
...

我意识到在我的单元测试中，我可能应该在某个地方模拟jquery，但我不确定正确的方法是什么，所以我只在测试配置中的一个地方做。

Answer 1

使用Vue.js (我看到您已经这样标记了问题)，我创建了自己的vue.config.js，如下所示。

基本上，它在开发/生产模式下将jquery标记为外部查询，并在测试模式下将其解析为模拟版本。不过，我将把创建jquery的模拟版本留给您。此示例改编自使用不同库的项目。

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,
    };
  },
};