Vitest - using installQuasar helper throws error when snapshot testing

[jacksongross]

Software version

OS: macOS 12.2.1 Node: 16.17.0 NPM: 8.15.0 Any other software related to your bug:

• @quasar/quasar-app-extension-testing-unit-vitest@0.1.2
• vitest@0.23.4
• vite@2.9.15
• quasar@2.10.0

What did you get as the error?

For a very basic component: Splashscreen.vue

<template>
  <div class="c-splashscreen">
    <div class="c-splashscreen__logo-container">
      <QSpinner
        :size="39"
        color="white"
        class="q-ma-md"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* Some styling not relevant for test scenario */
</style>

running the simple test below: Splashscreen.spec.js

import { installQuasar } from '@quasar/quasar-app-extension-testing-unit-vitest';
import { mount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';

import Splashscreen from 'src/components/Splashscreen.vue';

installQuasar();

function render() {
  return mount(Splashscreen);
}

describe('Splashscreen', () => {
  it('matches snapshot', () => {
    const wrapper = render();
    expect(wrapper.html()).toMatchSnapshot();
  });
});

I got the following error:

est/vitest/__tests__/components/Splashscreen.spec.js > Splashscreen > matches snapshot
Error: Snapshot cannot be used outside of test

But if I remove the installQuasar import and function call before the tests, it passes.

 ✓ test/vitest/__tests__/components/Splashscreen.spec.js (1)

Funnily enough, I have to also remove the import for it to work; just commenting out installQuasar() doesn't fix it.

What were you expecting?

The test to pass and snapshots to be written/compared by vitest.

What steps did you take, to get the error?

See above reproduction example

[jacksongross]

Hmm, appears uninstalling/reinstalling @quasar/quasar-app-extension-testing-unit-vitest has fixed it for me. Sorry about that, really thought I tried this!

[jacksongross]

Turns out this is happening in other cases as well. Test fails without installQuasar on

 ❯ ReactiveEffect.fn ../../node_modules/quasar/src/composables/private/use-dark.js:14:12
TypeError: Cannot read properties of undefined (reading 'dark')
     12|   return computed(() => (
     13|     props.dark === null
     14|       ? $q.dark.isActive
       |            ^
     15|       : props.dark
     16|   ))

but get the same Error: Snapshot cannot be used outside of test when calling that helper.

[jacksongross]

So it appears this error happens if there's an uncaught error somewhere in test setup -- in my case I had a module manual mock I was running before my tests which seems to be causing my issue. I will close this as the issue clearly isn't this plugin. Sorry for the spam!

[IlCallo]

That's a confusing error message indeed, thanks for investigating and providing the solution 👍🏻