Friday, August 5, 2022
HomeWordPress DevelopmentUPDATE: Testing a SolidJS Part Utilizing Vitest

UPDATE: Testing a SolidJS Part Utilizing Vitest


Just a few weeks in the past I revealed a submit describing how we will unit take a look at our SolidJS element utilizing the newly blazing-fast runner – Vitest. To be able to get the larger image on what I’m about to replace on this submit, I recommend that you just take a couple of minutes and browse it.

As you bear in mind the Vite configuration had a nasty “take a look at” part which needed to outline the “inline” dependencies, which indicated that there’s a spot there and this can be a mere patch in the interim.

After I revealed that submit I used to be reached out by Alex Lohr (@lexlohr) who pointed my consideration to this GitHub thread which principally presents an answer to the difficulty behind these strains in Vitest configuration:

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

Exit fullscreen mode

The mentioned resolution was presupposed to be merged and included in Vitest model 0.20.x, so let’s examine if that works, we could?


I first improve the vitest model:

yarn add -D vitest@newest

Now that I’ve model 0.20.3, let’s examine if our assessments nonetheless run with out altering something within the configuration… yep, they cross alright.

Now let’s take away the inline dependencies which I had so as to add (learn right here what this deps config means). I’ll begin with eradicating the solid-testing-library, so now the configuration seems to be like this:

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

Exit fullscreen mode

The assessments cross once more, however now I’ve some warnings on my terminal:

stderr | unknown take a look at
You seem to have a number of cases of Strong. This will result in surprising conduct.

stderr | src/elements/Timer/index.take a look at.jsx > Timer element > ought to render the timer
computations created outdoors a `createRoot` or `render` won't ever be disposed

stderr | src/elements/Timer/index.take a look at.jsx > Timer element > ought to render the timer in keeping with the shop timerSeconds
computations created outdoors a `createRoot` or `render` won't ever be disposed
Enter fullscreen mode

Exit fullscreen mode

It seems that there are greater than a single occasion of Strong and this is the reason we’re having points right here.
This in all probability has to do with having “solid-js” as an “inline” dependency, so let’s take away that as effectively.
Right here is my “take a look at” configuration. Discover that there are not any deps outlined in it in any respect:

take a look at: {
       globals: true,
       surroundings: 'jsdom',
       transformMode: {
           internet: [/.jsx?$/],
       },
       setupFiles: './setupVitest.js',
   },
Enter fullscreen mode

Exit fullscreen mode

And when working the assessments once more… they cross with none warning 🙂
Nice! I hate having patches in my code (or configuration) and if we now have an choice to eliminate it, hell yeah.

As at all times if you understand of different means to realize what’s described right here or have feedback/questions – remember to go away them within the feedback beneath in order that we will all be taught and evolve.

Thanks once more @lexlohr!

Hey! Should you preferred what you have simply learn try @mattibarzeev on Twitter 🍻

Photograph by Markus Winkler on Unsplash



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments