Vitest v0.34.x incompatibilities and @testing-library/jest-dom v6 fixes for: "Error: Cannot find module ...@testing-library/jest-dom/extend-expect.js"

[busticated]

hi again :wave:

on macOS v14.1 (23B74) with node@18.18.2 and npm@9.8.1 using the vite.config.js file shown here, i'm seeing an error when i run vitest:

Error: Error: Cannot find module /Users/me/code/my-project/node_modules/@testing-library/jest-dom/extend-expect.js

i believe i have the module in question installed:

>>npm ls @testing-library/jest-dom
my-project@0.0.0 /Users/me/code/my-project
└── @testing-library/jest-dom@6.1.4

looking at the files in the package, i see:

>>ls -la node_modules/@testing-library/jest-dom 
total 232
drwxr-xr-x  15 me  staff    480 Nov 21 16:22 .
drwxr-xr-x   4 me  staff    128 Nov 21 16:22 ..
-rw-r--r--   1 me  staff    187 Nov 21 16:22 CHANGELOG.md
-rw-r--r--   1 me  staff   1079 Nov 21 16:22 LICENSE
-rw-r--r--   1 me  staff  75617 Nov 21 16:22 README.md
drwxr-xr-x  12 me  staff    384 Nov 21 16:22 dist
-rw-r--r--   1 me  staff     49 Nov 21 16:22 jest-globals.d.ts
-rw-r--r--   1 me  staff    122 Nov 21 16:22 jest-globals.js
-rw-r--r--   1 me  staff     64 Nov 21 16:22 matchers.d.ts
-rw-r--r--   1 me  staff     70 Nov 21 16:22 matchers.js
drwxr-xr-x   3 me  staff     96 Nov 21 16:22 node_modules
-rw-r--r--   1 me  staff   4209 Nov 21 16:22 package.json
drwxr-xr-x   8 me  staff    256 Nov 21 16:22 types
-rw-r--r--   1 me  staff     43 Nov 21 16:22 vitest.d.ts
-rw-r--r--   1 me  staff    103 Nov 21 16:22 vitest.js

note that extend-expect.js is not there. seems the @testing-library/jest-dom package moved some files around since the template was last updated.

[awhitford]

There was a breaking change in version 6.0 that removed the extend-expect entry point in favor of a default entry point and some platform specific ones.

[busticated]

ah, thanks 🙏

i took a quick run at updating the template but ultimately hit weirdness when trying to update vitest to v0.34.x. testing lib queries seem broken:

TestingLibraryElementError: Unable to find an element with the text: /test new todo/. 
...
TestingLibraryElementError: Unable to find role="checkbox"

...and new (old) warnings are shown:

You appear to have multiple instances of Solid. This can lead to unexpected behavior.

computations created outside a `createRoot` or `render` will never be disposed

Test error details (click to expand)

``` > vite-template-solid@0.0.0 test > vitest DEV v0.34.6 /Users/me/code/bust/templates/js-vitest stderr | unknown test You appear to have multiple instances of Solid. This can lead to unexpected behavior. stderr | src/todo-list.test.jsx > > it will render an text input and a button computations created outside a `createRoot` or `render` will never be disposed stderr | src/todo-list.test.jsx > > it will add a new todo computations created outside a `createRoot` or `render` will never be disposed stderr | src/todo-list.test.jsx > > it will mark a todo as completed computations created outside a `createRoot` or `render` will never be disposed ❯ src/todo-list.test.jsx (3) 1040ms ❯ (3) 1040ms ✓ it will render an text input and a button × it will add a new todo × it will mark a todo as completed 1004ms ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 2 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ FAIL src/todo-list.test.jsx > > it will add a new todo TestingLibraryElementError: Unable to find an element with the text: /test new todo/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style

Add Todo

❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17 ❯ getByText node_modules/@testing-library/dom/dist/query-helpers.js:95:19 ❯ src/todo-list.test.jsx:19:12 17| fireEvent.click(button); 18| expect(input.value).toBe(''); 19| expect(getByText(/test new todo/)).toBeInTheDocument(); | ^ 20| }); 21| ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/2]⎯ FAIL src/todo-list.test.jsx > > it will mark a todo as completed TestingLibraryElementError: Unable to find role="checkbox" Ignored nodes: comments, script, style

Add Todo

Ignored nodes: comments, script, style

Add Todo

❯ waitForWrapper node_modules/@testing-library/dom/dist/wait-for.js:162:27 ❯ findByRole node_modules/@testing-library/dom/dist/query-helpers.js:86:33 ❯ src/todo-list.test.jsx:30:29 28| input.value = 'mark new todo as completed'; 29| fireEvent.click(button); 30| const completed = await findByRole('checkbox'); | ^ 31| expect(completed?.checked).toBe(false); 32| fireEvent.click(completed); ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/2]⎯ Test Files 1 failed (1) Tests 2 failed | 1 passed (3) Start at 11:58:56 Duration 1.86s (transform 131ms, setup 166ms, collect 120ms, tests 1.04s, environment 304ms, prepare 82ms) ```

here's the working patch i'm running atm:

diff --git a/js-vitest/package.json b/js-vitest/package.json
index 579774e..b268ca7 100644
--- a/js-vitest/package.json
+++ b/js-vitest/package.json
@@ -12,15 +12,15 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@solidjs/testing-library": "^0.7.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "jsdom": "^22.1.0",
+    "@solidjs/testing-library": "^0.8.4",
+    "@testing-library/jest-dom": "^6.1.4",
+    "jsdom": "^23.0.0",
     "solid-devtools": "^0.27.3",
     "vite": "^4.3.9",
     "vite-plugin-solid": "^2.7.0",
-    "vitest": "^0.32.2"
+    "vitest": "^0.33.0"
   },
   "dependencies": {
-    "solid-js": "^1.7.6"
+    "solid-js": "^1.8.5"
   }
 }
diff --git a/js-vitest/vite.config.js b/js-vitest/vite.config.js
index 034b1ba..91654b2 100644
--- a/js-vitest/vite.config.js
+++ b/js-vitest/vite.config.js
@@ -9,9 +9,7 @@ export default defineConfig({
     transformMode: {
       web: [/\.jsx?$/],
     },
-    setupFiles: ['node_modules/@testing-library/jest-dom/extend-expect.js'],
-    // otherwise, solid would be loaded twice:
-    deps: { registerNodeLoader: true },
+    setupFiles: './vitest-setup.js',
     // if you have few tests, try commenting one
     // or both out to improve performance:
     // threads: false,
diff --git a/js-vitest/vitest-setup.js b/js-vitest/vitest-setup.js
new file mode 100644
index 0000000..8339619
--- /dev/null
+++ b/js-vitest/vitest-setup.js
@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@solidjs/testing-library';
+import { afterEach } from 'vitest';
+
+
+afterEach(() => cleanup());
+

fwiw, i also tried the fixes suggested by @solidjs/testing-library but those didn't help.

i'll poke around a bit over in https://github.com/vitest-dev/vitest to see if i can spot the problematic change 👍