javascript - 如何测试Quasar（作为Vue CLI插件）？(How to test Quasar (as Vue CLI plugin)?)

Question

The bounty expires in 2 days) . 赏金将 在2天后过期) 。) Answers to this question are eligible for a +50 reputation bounty. 这个问题的答案有资格获得+50声望奖励。) zvadym wants to draw more attention) to this question. zvadym希望引起更多)关于此问题的注意) 。)

I have Vue project and I use Quasar Framework here.

(我有Vue项目，在这里使用Quasar Framework 。)

The last one I use as Vue CLI Plugin and it works perfect ( code repo and live url ).

(我用作Vue CLI插件的最后一个，它运行完美（ 代码仓库和实时url ）。)

Now I want to add some unit tests to my project (using jest) and I encountered a problem I did not understand..

(现在，我想在项目中添加一些单元测试（使用笑话），但遇到了一个我不明白的问题。)

I try to write a simple test for NetworkWatcher component.

(我尝试为NetworkWatcher组件编写一个简单的测试。)

This component uses QIcon component and I have to import it in my test:

(该组件使用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", () => {});

In this case I have an error:

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

After some experiments and searching I tried next

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

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 });

And it works, I can go this way.. but I don't like it.

(而且行得通，我可以这样走..但是我不喜欢它。)

It seems to be wrong!

(好像错了！)

So why the first way doesn't work?

(那么为什么第一种方法行不通呢？)

I know what Quasar has a good documentation for "Quasar CLI" version and even has it's own test runner.

(我知道Quasar拥有关于“ Quasar CLI”版本的良好文档，甚至拥有自己的测试运行程序。)

But I want to use "Vue CLI plugin" version.

(但是我想使用“ Vue CLI插件”版本。)

  ask by zvadym translate from so

Answer 1

Try using the bellow code.

(尝试使用下面的代码。)

As it's not able to resolve the quasar dependancy properly.

(由于它无法正确解决类星体依赖关系。)

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", () => {});