Incompatiblity between Vitest testing harness and Testing Library

[dwaxweiler]

Software version

OS: Windows 10 Enterprise Node: 18.15.0 NPM: 9.4.1

What did you get as the error?

   ❯ test/vitest/__tests__/ExampleComponent.test.ts (3)
   ❯ example Component (3)
     ✓ should mount component with todos
     ✓ should mount component without todos
     × should mount component without todos with testing-library

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  test/vitest/__tests__/ExampleComponent.test.ts > example Component > should mount component without todos 
with testing-library
TypeError: Cannot read properties of undefined (reading 'dark')
 ❯ ReactiveEffect.fn node_modules/quasar/src/composables/private/use-dark.js:16:12

 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:194:25
 ❯ ComputedRefImpl.get value [as value] node_modules/@vue/reactivity/dist/reactivity.cjs.js:1163:39
 ❯ ReactiveEffect.fn node_modules/quasar/src/components/item/QList.js:37:17
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:194:25
 ❯ ComputedRefImpl.get value [as value] node_modules/@vue/reactivity/dist/reactivity.cjs.js:1163:39
 ❯ Proxy.<anonymous> node_modules/quasar/src/components/item/QList.js:41:70
 ❯ renderComponentRoot node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:906:44
 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5587:57      
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:194:25

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  1 failed | 2 passed (3)
   Start at  11:35:29
   Duration  2.68s

 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

What were you expecting?

The example test rewritten using Testing Library also passes.

What steps did you take, to get the error?

1. Set up a new Quasar project.
2. Install Vitest testing harness via quasar ext add @quasar/testing-unit-vitest.
3. Install Vue Testing Library via npm install --save-dev @testing-library/vue.
4. Rewrite 2nd test in example component test file of ExampleComponent using Testing Library, and add import:

import { render } from "@testing-library/vue";

...

  it("should mount component without todos with testing-library", () => {
    const { container } = render(ExampleComponent, {
      props: {
        title: "Hello",
        meta: {
          totalCount: 4,
        },
      },
    });
    expect(container.querySelectorAll(".q-item")).toHaveLength(0);
  });

[IlCallo]

We didn't test the AE to suppot testing library and we don't have the bandwidth to officially support it Some devs from the community tried to make it work, you can find their tests into #v2-testing channel into our Discord server

If you're interested into helping out, I can provide some guidance to get to the bottom of it and possibly support it officially

[dwaxweiler]

Thanks for your explanation and your reference, @IlCallo!

I have read that one person mocked parts of $q to get tests running as a workaround. I would be happy to give it a go with your support. How should we continue?

[IlCallo]

First of all you'll need to understand the root cause of the problem IIRC I explored that in the past and the problem possibly relies in how testing library mount components, using a custom render function which wraps VTU This AE uses VTU directly, and this may cause a conflict

Care to investigate in that area and report back what you find?

[IlCallo]

Closing due to lack of response Please comment here if you found a solution for your problem, it could be useful for other devs

[dwaxweiler]

I have only managed to look into this issue now again.

Different builds of @vue/test-utils are imported as described in https://github.com/testing-library/vue-testing-library/issues/279#issuecomment-1336396037, so this is an issue related and already reported to @testing-library/vue. The workaround described there works fine for me.

[IlCallo]

Thanks for sharing your solution! 😁