如何测试 Quasar（作为 Vue CLI 插件）？

Question

我有 Vue 项目，我在这里使用Quasar Framework。最后一个我用作Vue CLI Plugin，它完美运行（code repo 和live url）。

现在我想在我的项目中添加一些单元测试（使用 jest），我遇到了一个我不明白的问题..

我尝试为NetworkWatcher 组件编写一个简单的测试。该组件使用QIcon 组件，我必须在我的测试中导入它：

import { Quasar, QIcon } from "quasar";
import NetworkWatcher from "@/components/NetworkWatcher.vue";

const localVue = createLocalVue();

localVue.use(Vuex);
localVue.use(Quasar, { components: { QIcon } });

describe("NetworkWatcher.vue", () => {});

在这种情况下我有一个错误：

经过一些实验和搜索，我尝试了下一个

import * as AllQuasar from "quasar";
const { Quasar } = AllQuasar;

const components = Object.keys(AllQuasar).reduce((object, key) => {
  const val = AllQuasar[key];
  if (val && val.component && val.component.name != null) {
    object[key] = val;
  }
  return object;
}, {});

const localVue = createLocalVue();

localVue.use(Vuex);
localVue.use(Quasar, { components });

而且它有效，我可以走这条路.. 但我不喜欢它。好像错了！那么为什么第一种方法行不通呢？

我知道 Quasar 有一个很好的“Quasar CLI”版本文档，甚至还有它自己的测试运行器。但我想使用“Vue CLI 插件”版本。

Answer 1

尝试使用下面的代码，因为它无法正确解决类星体依赖关系。

import { Quasar, QIcon } from "quasar-framework/dist/quasar.mat.esm"; //this line is modified 
import NetworkWatcher from "@/components/NetworkWatcher.vue";

const localVue = createLocalVue();

localVue.use(Vuex);
localVue.use(Quasar, { components: { QIcon } });

describe("NetworkWatcher.vue", () => {});