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

Question

I have Vue project and I use Quasar Framework here. The last one I use as Vue CLI Plugin and it works perfect ( code repo and live 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. This component uses QIcon component and I have to import it in my test:

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. But I want to use "Vue CLI plugin" version.

Answer 1

Try using the code below, as it's not able to resolve the quasar dependency 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", () => {});