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

Posted 2023-02-19

【中文标题】如何测试 Quasar（作为 Vue CLI 插件）？

【英文标题】：How to test Quasar (as Vue CLI plugin)?

【发布时间】：2020-03-17 08:01:39

【问题描述】：

我有 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 插件”版本。

【参考方案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", () => );

【讨论】：

我没有quasar-framework 包。在我的node_modules 中称为quasar，但dist 内部没有quasar.mat.esm