Create a guide to setup testing outside Quasar CLI

[IlCallo]

We often get issues from people who're not using Quasar CLI, thus this repo shouldn't be what they need, but I guess there isn't a guide for that use case at all right now
It's definitely possible to deduce how to make it work by checking out existing AE docs and code, but a full fledged guide could be useful too

Anyone which succesfully setup tests in a project using Quasar without Quasar CLI feel free to jump in and take the task, we'll put the guide in an MD file on its own and link it from the main README :)

[dirodriguezm]

Hi, could you give some insights on how to achieve this ? At least some short guidance, not the full tutorial.

Thanks.

[HarisSpahija]

We are currently facing this with our project that the installQuasarPlugin() is very important to make sure that all the components are picked up by test runners like jest. Do you have any pointers to how we can achieve an implementation for this library without Quasar CLI like @dirodriguezm mentioned?

quasar-testing/packages/unit-jest/src/helpers/install-quasar-plugin.ts

Line 6 in 4bbc056

export function installQuasarPlugin(options?: Partial<QuasarPluginOptions>) {

[IlCallo]

You should be able to just copy over the helper and use it, there's nothing fancy into it which prevents it to be used outside Quasar CLI project AFAIK

[HarisSpahija]

I did make a repo with some default configuration and it seems like components are not resolving. Is there some additional config we need to add for users in vue-cli?

https://github.com/HarisSpahija/quasar-testing-example-vue-cli

[dirodriguezm]

I ended up installing @quasar/quasar-app-extension-testing-unit-vitest and using installQuasar like the repo documentation says.

Also, note that if you are using Pinia, you need a helper function. Here's what I'm using:

export function installPinia() {
  const globalConfigBackup = config.global;

  beforeAll(() => {
    config.global.plugins.unshift(
      createPinia() as unknown as Plugin
    );
  });

  afterAll(() => {
    config.global = globalConfigBackup;
  });
}

With all the above considerations it finally worked, even with components that require q-layout

[HarisSpahija]

Amazing that you got the vitest side working @dirodriguezm , but sadly I still havent been able to make @quasar/quasar-app-extension-testing-unit-jest work for a project outside of vue-cli. See https://github.com/HarisSpahija/quasar-testing-example-vue-cli

Did you install @quasar/quasar-app-extension-testing-unit-vitest trough npm? Whenever I do the same for jest there is no exported member installQuasarPlugin on @quasar/quasar-app-extension-testing-unit-jest

[IlCallo]

@HarisSpahija are you using the correct version?
Jest AE for Qv2 is still in alpha, you need to use alpha tag while installing it, check out the docs

[HarisSpahija]

@IlCallo @quasar/testing-unit-jest@alpha is not an npm package. This ticket is for people that want to use quasar without the quasar-cli. How can I install @quasar/testing-unit-jest@alpha when not in a quasar cli project?

Nvm I figured it out

npm i --save-dev @quasar/quasar-app-extension-testing-unit-jest@alpha

[HarisSpahija]

The component still seems to not be running on a button component.
jest.config.js

const esModules = ["quasar", "quasar/lang", "lodash-es"].join("|");

module.exports = {
  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
  testMatch: ["<rootDir>/**/*.spec.(js|jsx|ts|tsx)"],
  transform: {
    // See https://jestjs.io/docs/en/configuration.html#transformignorepatterns-array-string
    [`^(${esModules}).+\\.js$`]: "babel-jest",
  },
  transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
};

Button.spec.ts

import { DOMWrapper, mount } from "@vue/test-utils";
import Button from "./Button.vue";
import { installQuasarPlugin } from "@quasar/quasar-app-extension-testing-unit-jest";

installQuasarPlugin();

describe.only("Button", () => {
  beforeEach(() => {
    mount(Button);
  });

  it("Should render button element", () => {
    const wrapper = new DOMWrapper(document.body);

    expect(wrapper.find("button").exists()).toBeTruthy();
  });
});

Button.vue

<template>
  <q-button color="primary" label="OK" @click="onOKClick" />
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "Button",
  emits: ["click"],
  setup(props, { emit }) {
    const onOKClick = () => {
      emit("click");
    };

    return {
      onOKClick,
    };
  },
});
</script>

Error returned:

Repo: https://github.com/HarisSpahija/quasar-testing-example-vue-cli

[HarisSpahija]

I made a comparison component to see if the Button.vue without quasar would render. The goal is to see if a button element is rendered. The problem with quasar is that the test fails.

// Button.vue
<template>
  <button @click="onOKClick">Button</button>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "Button",
  emits: ["click"],
  setup(props, { emit }) {
    const onOKClick = () => {
      emit("click");
    };

    return {
      onOKClick,
    };
  },
});
</script>

// Button.spec.ts
import { mount } from "@vue/test-utils";
import Button from "./Button.vue";

describe("Button", () => {
  it("Should render button element", () => {
    const wrapper = mount(Button);

    console.log(wrapper.html()); // returns <button>Button</button>

    expect(wrapper.find("button").exists()).toBeTruthy();
  });
});

while a button with the installQuasarPlugin fails

// QuasarButton.vue
<template>
  <q-button @click="onOKClick">Button</q-button>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "Button",
  emits: ["click"],
  setup(props, { emit }) {
    const onOKClick = () => {
      emit("click");
    };

    return {
      onOKClick,
    };
  },
});
</script>

// QuasarButton.spec.ts
import { mount } from "@vue/test-utils";
import QuasarButton from "./QuasarButton.vue";
import { installQuasarPlugin } from "@quasar/quasar-app-extension-testing-unit-jest";

installQuasarPlugin();

describe("Button", () => {
  it("Should render button element", () => {
    const wrapper = mount(QuasarButton); // <- fails 

    console.log(wrapper.html());

    expect(wrapper.find("button").exists()).toBeTruthy();
  });
});

The error I get

TypeError: Cannot convert undefined or null to object
        at Function.assign (<anonymous>)

       7 | describe("Button", () => {
       8 |   it("Should render button element", () => {
    >  9 |     const wrapper = mount(QuasarButton);
         |                     ^
      10 |
      11 |     console.log(wrapper.html());
      12 |

      at installQuasar (node_modules/quasar/dist/quasar.cjs.prod.js:6:15228)
      at Object.install (node_modules/quasar/dist/quasar.cjs.prod.js:6:479751)
      at Object.use (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4305:28)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:8228:25)
      at Object.<anonymous> (src/components/ComponentExample/QuasarButton/QuasarButton.spec.ts:9:21)

I dont know how to get the quasar component to pass even a simple render sanity check. Is there additional config required because the documentation explanation of just inserting the plugin function doesnt seem to work. Here is the repo with project setup: https://github.com/HarisSpahija/quasar-testing-example-vue-cli

I also tried to go trough the vitest approach with vue-cli. But this one returns the same errors where quasar components are not rendered. Is there a chance you can share an example of your implementation @dirodriguezm ?

[denisibanez]

i have problems to, i try install the quasar-app-extension-testing-unit-jest in my vite project (i dont use quasar cli), but i receive the error: TypeError: (0 , _quasarAppExtensionTestingUnitJest.installQuasarPlugin) is not a function...

`import HelloWorld from "./HelloWorld.vue";
import { mount } from "@vue/test-utils";
import { QBtn } from 'quasar';
import { installQuasarPlugin } from "@quasar/quasar-app-extension-testing-unit-jest";

installQuasarPlugin({ plugins: { QBtn } });

test("HelloWorld Component renders", () => {
const wrapper = mount(HelloWorld)
expect(wrapper).toBeTruthy();
});`

[IlCallo]

@HarisSpahija @denisibanez I'm not sure you'll be able to use helpers exported by a Quasar App Extension into a codebase which isn't using Quasar CLI

That's why in a previous message I suggested this:

You should be able to just copy over the helper and use it

"Copy over the helper" means "copy the code in your project and use it locally"
It's very different than installing the published package, which relies on being executed where a @quasar/app-* package is available, and using the helper from there

Once you are able to have a working setup, if you provide me a repo, I'll be able to polish it and publish it as a package for everyone to use when dealing with projects using Quasar but without Quasar CLI

---

@denisibanez Jest cannot be used for Vite projects, there's a big banner right at the beginning of the Jest AE README. Use Vitest

@HarisSpahija you need to load all Components and Plugins you'll use for the test with the installQuasarPlugin. When using Quasar packages that's usually taken care automatically by the framework, but you're working outside the framework and you should configure everything manually

[HarisSpahija]

@IlCallo Yeah we figured that out and moving to quasar cli solved most of our issues