Question

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

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

，然后从CDN在index.html中的脚本标记中加载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 标记为外部，并在 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,
    };
  },
};

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

1 个答案: