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 👋

on macOS v14.1 (23B74) with [email protected] and [email protected] 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
[email protected] /Users/me/code/my-project
└── @testing-library/[email protected]

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)

> [email protected] 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 > <TodoList /> > 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 > <TodoList /> > it will add a new todo
computations created outside a `createRoot` or `render` will never be disposed

stderr | src/todo-list.test.jsx > <TodoList /> > 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
   ❯ <TodoList /> (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 > <TodoList /> > 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
<div>
  <div>
    <input
      placeholder="new todo here"
    />
    <button>
      Add Todo
    </button>
  </div>
</div>
 ❯ 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 > <TodoList /> > it will mark a todo as completed
TestingLibraryElementError: Unable to find role="checkbox"

Ignored nodes: comments, script, style
<div>
  <div>
    <input
      placeholder="new todo here"
    />
    <button>
      Add Todo
    </button>
  </div>
</div>

Ignored nodes: comments, script, style
<div>
  <div>
    <input
      placeholder="new todo here"
    />
    <button>
      Add Todo
    </button>
  </div>
</div>
 ❯ 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 👍