使用 Vue CLI 和 mochapack 模拟模块答案

【问题标题】：Mock module using Vue CLI and mochapack使用 Vue CLI 和 mochapack 模拟模块
【发布时间】：2019-12-17 17:00:11
【问题描述】：

我在我的 Electron 应用程序中使用了一小部分 Electron API，对于单元测试来说，能够模拟 electron 模块会很棒，这样当我在我的测试中执行 import "electron" 时它会加载我的模拟版本，而不是无法加载真实的版本。

我知道 Spectron，我确实尝试过设置它，但它只是一堆过时的依赖项和毫无意义的错误消息，我放弃了与之抗争。它似乎也不支持无头模式，所以对我的测试来说太过分了。

我也是 Jest 有一个似乎是为此目的设计的 jest.mock() 函数，但我没有使用 Jest，无论如何告诉 Webpack 完全替换模块似乎是一个更清洁的解决方案。

我认为我应该可以使用Webpack aliases 来执行此操作，例如：

resolve: {
  alias: {
    'electron': path.resolve(__dirname, 'tests/fake_electron.js'),
  },
},

但我不知道如何告诉 Vue CLI 在运行 test:unit 时使用该 webpack 配置。我该怎么做？

【问题讨论】：

标签： unit-testing webpack mocha.js vue-cli

【解决方案1】：

这行得通！

// package.json
...
  "scripts": {
    "test:unit": "ENABLE_MODULE_MOCKS=1 vue-cli-service test:unit",

// vue.config.js

const path = require("path");

module.exports = {
  chainWebpack: config => {
    if (process.env.ENABLE_MODULE_MOCKS) {
      console.log("Enabling module mocks");
      config.resolve.alias.set(
        "electron",
        path.resolve(__dirname, "tests/mocks/electron.js"),
      );
    }
  },
};

// tests/mocks/electron.js

export const remote = {
  app: {
    isPackaged: false,
    getAppPath: () => "foo",
  },
  // Add more mocks as required.
};

我没有费心尝试将它与 Typescript 集成，因为这个构建系统已经够疯狂了。

【讨论】：