test-utils icon indicating copy to clipboard operation
test-utils copied to clipboard

allow running `setupFiles` before nuxt environment

Open gbyesiltas opened this issue 2 years ago โ€ข 8 comments

I am using FormKit in some of my components, and formkit is throwing a ResizeObserver is not defined error when I'm running my tests with the jsdom environment instead of the happy-dom environment

gbyesiltas avatar Jul 31 '23 09:07 gbyesiltas

This is due to ResizeObserver observer not being present in JSDOM and nuxt-vitest doesn't do any attempt to polyfill it either. You will probably not be able to set this via setupFiles in Vitest since the Nuxt environment gets created before the setupFiles are ever run.

In general it would be really nice if there was some way of extending the DOM environment before Nuxt is run: either by nuxt-vitest providing some way of specifying a specific setup file for this, or by delaying the app execution until after the setupFiles are run.

oskarols avatar Aug 01 '23 09:08 oskarols

This is a showstopper for us as well, as we are not able to mock ResizeObserver, indexedDB etc.

@danielroe is it possible to mock these things with some workarounds?

OlaAlsaker avatar Oct 13 '23 07:10 OlaAlsaker

Yes, you can mock things like that using vitest's setupFiles option, IIRC.

danielroe avatar Oct 13 '23 08:10 danielroe

I actually tried that, but it didn't quite work โ€“ at least not for plugins. I have a Nuxt-plugin that uses idb-keyval (which tries to use indexedDB under the hood). Even tried renaming the plugin into plugin.client.ts.

I assume that the mocking happens after the Nuxt-environment (with plugins) is loaded?

Looks like there is already some mocking integrated into the vitest-environment-nuxt package:

https://github.com/danielroe/nuxt-vitest/blob/b7ced3c1d23b0c9733e34dbcd9f619fcc94ffe80/packages/vitest-environment-nuxt/src/index.ts#L56-L62

Could it be possible to just add some more mocks here, for instance ResizeObserver and indexedDB?

OlaAlsaker avatar Oct 13 '23 08:10 OlaAlsaker

Yes, you can mock things like that using vitest's setupFiles option, IIRC.

I don't think this is actually the case unfortunately. Since nuxt-vitest architecturally hooks itself up to Vitest as a vitest environment, it gets run before setupFiles is ever run.

So the mocking does work for e.g. the test files, but in the case of mocking dependencies used by the nuxt application it does not since the setup of this is run before the mocks are setup via setupFiles.

oskarols avatar Oct 27 '23 09:10 oskarols

That is correct, @oskarols . Hopefully my PR (#361) will fix this issue, as it will be able to mock stuff before the Nuxt environment is fired up.

OlaAlsaker avatar Oct 27 '23 13:10 OlaAlsaker

In the latest nightly release of @nuxt/test-utils we now implement the environment with a setup file, meaning it should be possible to allow users to specify setup files to run before the nuxt environment is made ready. Any PR would be welcome on this if I don't get a chance first. ๐Ÿ™

danielroe avatar Dec 02 '23 23:12 danielroe

In the latest nightly release of @nuxt/test-utils we now implement the environment with a setup file, meaning it should be possible to allow users to specify setup files to run before the nuxt environment is made ready. Any PR would be welcome on this if I don't get a chance first. ๐Ÿ™

Hey @danielroe, in my experience, I see that this is now the default behaviour. But is there still a way to run the setup files after the nuxt environment is set-up?

gbyesiltas avatar Jan 02 '24 10:01 gbyesiltas