在 Vue 单元测试中模拟 webpack“外部”（即 jquery）的正确方法（使用 mocha）答案

【问题标题】：Correct way to mock webpack "externals" (i.e. jquery) in Vue unit tests (using mocha)在 Vue 单元测试中模拟 webpack“外部”（即 jquery）的正确方法（使用 mocha）
【发布时间】：2019-09-03 11:48:03
【问题描述】：

我有一个使用 Vue CLI v3.5 创建的 Vue 项目，我正在尝试编写一些组件单元测试。我在 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，但我不确定这样做的正确方法是什么，所以我只在测试配置中的一个地方进行。

【问题讨论】：

另一个有相同问题的未回答问题：stackoverflow.com/questions/45724728/…
另一个未回答的问题：stackoverflow.com/questions/46655678/…

标签： javascript unit-testing vue.js webpack

【解决方案1】：

使用 Vue.js（我看到你已经标记了你的问题），我创建了自己的 vue.config.js，如下所示。

基本上，它在开发/生产模式下将 jquery 标记为外部，并在 test 模式下将其解析为模拟版本。创建一个 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,
    };
  },
};

【讨论】：