Question

我在我的Electron应用程序中使用了Electron API的一小部分，对于单元测试而言，能够模拟electron模块非常好，这样当我深入import "electron"我的测试将加载我的模拟版本，而不是未能加载真实版本。

我知道Spectron，我确实尝试设置它，但是这完全是一堆陈旧的依赖关系和毫无意义的错误消息，我放弃了与它的斗争。它似乎也不支持无头模式，因此对我的测试来说是过大的杀伤力。

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

我认为我应该可以使用Webpack aliases来做到这一点，就像这样：

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

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

Answer 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集成，因为此构建系统已经足够疯狂了。

使用Vue CLI和mochapack模拟模块

1 个答案: