UPDATE: Testing a SolidJS Component Using Vitest

#webdev #testing #solidjs #tutorial

A few weeks ago I published a post describing how we can unit test our SolidJS component using the newly blazing-fast runner - Vitest. In order to get the bigger picture on what I’m about to update in this post, I suggest that you take a few minutes and read it.

As you remember the Vite configuration had a nasty “test” section which had to define the “inline” dependencies, which indicated that there’s a gap there and this is a mere patch for the time being.

After I published that post I was reached out by Alex Lohr (@lexlohr) who pointed my attention to this GitHub thread which basically offers a solution to the issue behind these lines in Vitest configuration:

deps: {
           inline: [/solid-js/, /solid-testing-library/],
       },

The discussed solution was supposed to be merged and included in Vitest version 0.20.x, so let’s check if that works, shall we?

I first upgrade the vitest version:

yarn add -D vitest@latest

Now that I have version 0.20.3, let's check if our tests still run without changing anything in the configuration… yep, they pass alright.

Now let’s remove the inline dependencies which I had to add (read here what this deps config means). I will start with removing the solid-testing-library, so now the configuration looks like this:

deps: {
           inline: [/solid-js/],
       },

The tests pass again, but now I have some warnings on my terminal:

stderr | unknown test
You appear to have multiple instances of Solid. This can lead to unexpected behavior.

stderr | src/components/Timer/index.test.jsx > Timer component > should render the timer
computations created outside a `createRoot` or `render` will never be disposed

stderr | src/components/Timer/index.test.jsx > Timer component > should render the timer according to the store timerSeconds
computations created outside a `createRoot` or `render` will never be disposed

It appears that there are more than a single instance of Solid and this is why we’re having issues here.
This probably has to do with having “solid-js” as an “inline” dependency, so let’s remove that as well.
Here is my “test” configuration. Notice that there are no deps defined in it at all:

test: {
       globals: true,
       environment: 'jsdom',
       transformMode: {
           web: [/\.jsx?$/],
       },
       setupFiles: './setupVitest.js',
   },

And when running the tests again… they pass without any warning :)
Great! I hate having patches in my code (or configuration) and if we have an option to get rid of it, hell yeah.

As always if you know of other means to achieve what’s described here or have comments/questions - be sure to leave them in the comments below so that we can all learn and evolve.

Thanks again @lexlohr!

Hey! If you liked what you've just read check out @mattibarzeev on Twitter 🍻

Photo by Markus Winkler on Unsplash