Error when running tests with Vitest

[clemvnt]

Describe the bug

When I run the tests with Vitest, I get the following error:

I guess adding the vitest.setup.ts to the exports list (and in the files list because this file is not published) of the package.json file of the solid-start package should solve the problem. But looking at this file, I wonder if it is really required as you can do tests without needing @testing-library/jest-dom.

To fix this issue on my side, I added a custom vite plugin that override the config and more precisely the test.setupFiles option :

Then, I got another error :

To fix this error, I setted the test.deps.registerNodeLoader option to true (like in the solid example of the vitest repo) :

This option seems to be required since v0.21.0 (vitest-dev/vitest#1778).

And now, tests are working :

Reproduction

https://github.com/clemvnt/solid-stack

To reproduce the error, you must comment the custom vite plugin that override the config.

Alternative

I wonder if it is really necessary for the solid-start vite plugin to completely define the vitest configuration because it seems that we cannot add our own configuration such as :

Is it possible that the configuration could be overwritten on our side? The solid-start vite plugin could still set the required options (test.transformMode.web and test.deps.registerNodeLoader) and leave the possibility to add or override options.

Moreover, the test.globals, test.setupFiles, test.threads, test.isolate options do not seem to be required for the tests to work. Wouldn't it be better not to set these options to use the default vitest behavior and let the user choose?

I suppose that this alternative would require a change in the following lines :

- test: {
+ test: mergeConfig({
   environment: "jsdom",
   transformMode: {
     web: [/\.[tj]sx?$/]
   },
+  deps: {
+    registerNodeLoader: true
+  },
+ }, conf.test),
-  globals: true,
-  setupFiles: "node_modules/solid-start/vitest.setup.ts"
-  threads: false
-  isolate: false
- },

Depending on which solution you choose, fixing the missing import or the proposed alternative, I could make a pull request.

[nksaraf]

Thanks for this! I have been reconsidering this approach since I added it and basically was waiting for some feedback. This is very helpful, and im gonna think about a good solution.. the idea is I wanted for people to be the install vitest, jsdom, @testing-library/jest-dom, etc. and start testing without configuring

[atk]

I have already an idea on how to do that. We can test in the running config which environment is available and adapt the config correspondingly; also we can set/augment the testing config in the plugin. I'm currently a bit low on time, but if nobody else will, I can prepare a PR.

[clemvnt]

Also, leaving the choice of environment will be even more relevant when @vitest/browser is ready.

Some people will want to run their tests directly in the browser, others will want to use jsdom (or happy-dom but not right away because there are blocking issues: capricorn86/happy-dom#544, capricorn86/happy-dom#343).

[atk]

The happy-dom issue is supposedly resolved.

[cnava9389]

The hydration error can also be fixed if you add solid-js as an inline dependency in vite.config.

test: {
environment: 'happy-dom',
includeSource: ['src/**/*.{js,ts,jsx,tsx}'],
globals: true,
isolate: true,
deps: {
inline: [/solid-js/],
},
transformMode: {
web: [/.[jt]sx?$/],
}
}

[ryansolid]

@clemvnt Is this issue resolved now?

[atk]

The happy-dom issues are fixed by now. Instead of deps.inline = [/solid-js/], the new proposed configuration is deps.registerNodeLoader = true.

[orenelbaum]

It seems like the issue can be closed?
The Vitest template seems to be working fine.

[atk]

I agree. This can be closed.

[clemvnt]

The issue is solved. Thank you all!