vite-pwa / docs

Documentation: PWA integrations for Vite and the ecosystem
https://vite-pwa-org.netlify.app/
MIT License
197 stars 45 forks source link

Broken with Vitest 0.32.0 #56

Closed doutatsu closed 1 year ago

doutatsu commented 1 year ago

As I am trying to upgrade from 0.31 to 0.32, I am getting the following error in my tests. I presume it's because Vitest now throws an error when a module cannot be resolved. I am not really sure how to resolve this, I presume it's because of how this gets imported, aka route being virtual `from 'virtual:pwa-register/vue';

image
userquin commented 1 year ago

can you try adding v-if="!import.meta.vitest" to the component?

<BaseReloadPrompt v-if="!import.meta.vitest"....
userquin commented 1 year ago

rn you cannot test service workers in Vitest, and @vitest/browser still experimental...

doutatsu commented 1 year ago

I am not testing them in vitest, rather it just gets imported automatically across all tests, as it's a base component. But I'll give it a go with v-if as I am not testing it

userquin commented 1 year ago

ok, you can check examples/vue-router in vite-plugin-pwa, I'll test it with latest Vitest... you have a build and browser tests with Vitest and PlayWright respectivelly.

doutatsu commented 1 year ago

Yeah, I can't just do v-if and I am not interested in browser tests. I think I need to just adjust my auto-imports to ignore this component in vitest environment

Edit: It's actually not the auto-loading plugin I made. I am not importing this component at all now and I am still getting an error.

userquin commented 1 year ago

Maybe you can use defineAsyncComponent doing the check inside the resolver returning undefined, avoid registering the component globally (auto-import or similar libs).

I have all tests working on my local (vite-plugin-pwa), I haven't sent the PR yet to bump dependencies...

imagen

userquin commented 1 year ago

I guess you're testing your app with @vue/test-utils, maybe you can create a functional ts/js component, rendering the component inside the setup, something like this:

// src/components/base_components/BaseWrapperReloadPrompt.ts
import { defineComponent, h } from 'vue'

export const BaseWrapperReloadPrompt = defineComponent({
  async setup(props) {
    if (import.meta.vitest)
      return {}

    const component = await import('./BaseReloadPrompt.vue')
    return () => h(component.default ?? component, props)
  },
})
doutatsu commented 1 year ago

The latest Vitest version (0.33) doesn't have an issue anymore. Not sure what change they made, but this is not an issue anymore

userquin commented 1 year ago

thx for reporting @doutatsu