Vitest and the $q object pt 2

[jrgleason]

What happened?

Problem similar to that described here

I start out with this issue while using Vitetest...

TypeError: Cannot read properties of undefined (reading 'screen')
 ❯ setup node_modules/quasar/src/components/layout/QLayout.js:43:49
     42| 
     43|     const classes = computed(() =>
     44|       'q-layout q-layout--'
       |              ^
     45|       + (props.container === true ? 'containerized' : 'standard')
     46|     )

The documentation referenced uses @quasar/quasar-app-extension-testing-unit-jest which has a bunch of npm audit issues so I can't use it. Next I try to just re-implement it per the other link...

import { afterAll } from 'vitest';
import { config } from '@vue/test-utils';
import { cloneDeep } from 'lodash-es';
import { Quasar } from 'quasar';

export function installQuasarPlugin(options) {
    const globalConfigBackup = cloneDeep(config.global);

    // We must execute this outside a `beforeAll`
    // or `mount` calls outside `test` context (eg. called into a `describe` context and shared by multiple tests)
    // won't have those defaults applied
    config.global.plugins.unshift([Quasar, options]);
    afterAll(() => {
        config.global = globalConfigBackup;
    });
}

The lodash-es library does not seem to have any issues so I think I am good there. Then I am using it like this...

import { mount } from '@vue/test-utils';
import App from "../src/App.vue";
import { expect, describe, it } from 'vitest';
import {installQuasarPlugin} from "./VueUtil.mjs";

installQuasarPlugin();
describe("Test App", ()=>{
    it("Basic test", ()=>{
        const wrapper = mount(App);
        expect(wrapper.exists()).toBe(true);
    })
})

But that throws the log output below

What did you expect to happen?

I would expect to be able to run Vitest with Quasar

Reproduction URL

https://github.com/jrgleason/midas/tree/MORE_STUFF

How to reproduce?

1. Clone project
2. change into the frontend directory
3. run npm ci
4. run npm run test

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

App Extension API

Platforms/Browsers

Firefox, Chrome

Quasar info output

"dependencies": {
    "@quasar/extras": "latest",
    "axios": "latest",
    "cheerio": "latest",
    "quasar": "latest",
    "vue": "latest"
  },
  "devDependencies": {
    "lodash-es": "latest",
    "@quasar/vite-plugin": "latest",
    "@vitejs/plugin-vue": "latest",
    "@vitest/coverage-c8": "latest",
    "@vue/test-utils": "latest",
    "jsdom": "latest",
    "sass": "latest",
    "vite": "latest",
    "vitest": "latest"
  },

### Relevant log output

```Shell
TypeError: Cannot convert undefined or null to object
 ❯ installQuasar node_modules/quasar/dist/quasar.cjs.prod.js:6:15453
 ❯ Object.install node_modules/quasar/dist/quasar.cjs.prod.js:6:490217
 ❯ Object.use node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4377:28
 ❯ createInstance node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.mjs:8163:25
 ❯ Module.mount node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.mjs:8242:14
 ❯ test/App.spec.mjs:9:25
      7| describe("Test App", ()=>{
      8|     it("Basic test", ()=>{
      9|         const wrapper = mount(App);
       |

Additional context

No response

[jrgleason]

I also tried using chat GPT, it came up with this...

import { mount } from '@vue/test-utils';
import App from "../src/App.vue";
import { expect, describe, it } from 'vitest';
import { Quasar } from 'quasar';
import { createLocalVue } from '@vue/test-utils';
import quasarPlugin from '@quasar/vite-plugin';

const localVue = createLocalVue()
localVue.use(Quasar, { plugins: [quasarPlugin] })

describe("Test App", ()=>{
    it("Basic test", ()=>{
        const wrapper = mount(App);
        expect(wrapper.exists()).toBe(true);
    })
})

But that throws

 FAIL  test/App.spec.mjs [ test/App.spec.mjs ]
TypeError: The URL must be of scheme file
 ❯ Object.openSync node:fs:583:10
 ❯ Object.readFileSync node:fs:459:35
 ❯ Object.<anonymous> node_modules/vite/dist/node-cjs/publicUtils.cjs:19:48
 ❯ Object.<anonymous> node_modules/vite/index.cjs:7:31

[etewiah]

@jrgleason - I'm interested in knowing what you mean by "I also tried using chat GPT".

[HarisSpahija]

Ill jump into this today to try to reproduce, I had similiar issues with vitest. There should be a vitwst plugin somewhere. Have you tried that?

https://github.com/quasarframework/quasar/discussions/12810