Getting ReferenceError: React is not defined with Vitest + Solid Testing Library
I honestly have no idea how I am receiving this error but I am despite testing using
@solidjs/testing-library
. Moreover, I am using Vitest
by itself (not Vite
) and my vitest.config.ts
is as follows:
The test that is causing the error to appear is a custom Solid hook test where I am attempting to pass a wrapper
to my renderHook
invocation.
Anybody seen that before?16 Replies
You missed plugins: [solid()] that needs to be imported from vite-plugin-solid.
And you can lose the deps, our plugin already does the required configuration.
@Alex Lohr is there any way to get it working with just Vitest? Or do I have to use Vitest through a Vite config?
you can use vite plugins in “just vitest”
isn’t vite its dependency?
I’ve just installed Vitest and created a
vitest.config.ts
and everything worked until I tried to create a wrapper component
In my case I’m just building a custom SolidJS hooks librarywell you need solid’s jsx compiler if you want to use jsx with solid
regardless of of its vite, vitest, jest, or whatever
but also if it’s a library that has nothing to do with rendering, then there is no point in adding rendering to unit tests
you can test most functionality with just
createRoot
, that’s what we usually do in solid-primitives
we use vitest as wellif you have a vitest.config.js, you need to copy the parts of vite.config.js that let solid do its precompilation and avoid requiring React for JSX over. That is, if you don't have solid-start, this should work, otherwise, you still need the vitest.config.ts.
@Alex Lohr what parts are those exactly?
Basically, the vite-plugin-solid, like I said. I'm currently trying to fix testing in solid-start, too.
Ah, interesting, let me try that then. So I just wrap my hooks with a
createRoot
call in test?Exactly.
Excellent — let me see if I can get away with just doing that then
@Alex Lohr holy crapola! Wrapping with
createRoot
in test worked! So wait, is it safe to say there's no need to use renderHook
from @solidjs/testing-library
for hook libraries?renderHook is only there if you want to test your hooks in a JSX context (e.g. to wrap it in a provider).
otherwise, createRoot suffices.
If you are not using that, you can forgo testing-library, because that's only used to test stuff from a user's perspective within an rendered page (or an approximate representation of one).
So incredible — this just removed a heavy blocker I was dealing with in test. Thank you so much!!
I should probably add a few lines to the README of our testing library.
To unblock other people with the same issues.
@Alex Lohr I think that’s a great idea.
I think emphasizing that point of being able to rely on
createRoot
and linking to examples demonstrating that technique would be perfect. In my head, I had the impression that I needed to use the Solid Testing Library for anything and everything related to Solid