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 opened this issue · 2 comments
busticated commented
hi again 👋
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 commented
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 commented
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 > <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 👍