A simple example about how to use Vitest and Quasar
This project is buid on top of
yarn install
yarn build
yarn dev
yarn test
yarn test --run
In test/setup.ts
is where Quasar is registered in test utils.
import { config } from "@vue/test-utils";
import { Quasar } from "quasar";
config.global.plugins.push([Quasar, {}]);
TODO: move production quasar and test quasar to the same file
In test/_utils/quasar.ts there is a function to wrarp quasar components.
import { defineComponent, h, normalizeProps } from "vue";
import { mount } from "@vue/test-utils";
import { QLayout } from "quasar";
const buildWithLayout = (original) => {
return defineComponent({
inheritAttrs: false,
setup(_props, ctx) {
return () =>
h(QLayout, null, () => [h(original, normalizeProps(ctx.attrs))]);
},
});
};
const mountQuasar: typeof mount = (original, ...options) => {
return mount(buildWithLayout(original), ...options);
};
export {
mountQuasar
}
TODO: turn it more future proof
There is a alias to root of the project, called :
.
So we can just import the file from any component or script.
import { mountQuasar } from ":/test/_utils";
import { test, expect } from 'vitest'
// -- omit ---
const wrapper = mountQuasar(COMPONENT);
const inner = wrapper.findComponent(BtnCounter);
See BtnCounter.test.ts
for a full example.