ts-vitest template broken
awhitford opened this issue · 2 comments
awhitford commented
The ts-vitest template does not work.
Follow these steps to reproduce:
pnpx degit solidjs/templates/ts-vitest aw-ts-vitestcd aw-ts-vitestpnpm installpnpm test
3 tests fail
> vite-template-solid@0.0.0 test /Users/anthony/github/awhitford/aw-ts-vitest
> vitest
DEV v0.32.2 /Users/anthony/github/awhitford/aw-ts-vitest
(node:5430) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("file%3A///Users/anthony/github/awhitford/aw-ts-vitest/node_modules/.pnpm/vitest%400.32.2_jsdom%4022.1.0/node_modules/vitest/dist/loader.js", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)
(node:5430) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
❯ src/todo-list.test.tsx (3)
❯ <TodoList /> (3)
× it will render an text input and a button
⠹ [ afterEach ]
× it will add a new todo
⠹ [ afterEach ]
× it will mark a todo as completed
⠹ [ afterEach ]
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 3 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
FAIL src/todo-list.test.tsx > <TodoList /> > it will render an text input and a button
TestingLibraryElementError: Unable to find an element with the placeholder text of: new todo here
Ignored nodes: comments, script, style
<div />
❯ Object.getElementError node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ getByPlaceholderText node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/todo-list.test.tsx:8:12
6| test('it will render an text input and a button', () => {
7| const { getByPlaceholderText, getByText } = render(() => <TodoList />);
8| expect(getByPlaceholderText('new todo here')).toBeInTheDocument();
| ^
9| expect(getByText('Add Todo')).toBeInTheDocument();
10| });
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/6]⎯
FAIL src/todo-list.test.tsx > <TodoList /> > it will render an text input and a button
FAIL src/todo-list.test.tsx > <TodoList /> > it will add a new todo
FAIL src/todo-list.test.tsx > <TodoList /> > it will mark a todo as completed
TypeError: dispose is not a function
❯ cleanupAtContainer node_modules/.pnpm/@solidjs+testing-library@0.7.1_solid-js@1.7.6/node_modules/@solidjs/testing-library/dist/index.js:96:3
94| function cleanupAtContainer(ref) {
95| const { container, dispose } = ref;
96| dispose();
| ^
97| if (container?.parentNode === document.body) {
98| document.body.removeChild(container);
❯ cleanup node_modules/.pnpm/@solidjs+testing-library@0.7.1_solid-js@1.7.6/node_modules/@solidjs/testing-library/dist/index.js:103:21
❯ node_modules/.pnpm/@solidjs+testing-library@0.7.1_solid-js@1.7.6/node_modules/@solidjs/testing-library/dist/index.js:17:13
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/6]⎯
FAIL src/todo-list.test.tsx > <TodoList /> > it will add a new todo
TestingLibraryElementError: Unable to find an element with the placeholder text of: new todo here
Ignored nodes: comments, script, style
<div />
❯ Object.getElementError node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ getByPlaceholderText node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/todo-list.test.tsx:14:19
12| test('it will add a new todo', async () => {
13| const { getByPlaceholderText, getByText } = render(() => <TodoList />);
14| const input = getByPlaceholderText('new todo here') as HTMLInputElement;
| ^
15| const button = getByText('Add Todo');
16| input.value = 'test new todo';
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/6]⎯
FAIL src/todo-list.test.tsx > <TodoList /> > it will mark a todo as completed
TestingLibraryElementError: Unable to find an element with the placeholder text of: new todo here
Ignored nodes: comments, script, style
<div />
❯ Object.getElementError node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ getByPlaceholderText node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/todo-list.test.tsx:26:19
24| <TodoList />
25| ));
26| const input = getByPlaceholderText('new todo here') as HTMLInputElement;
| ^
27| const button = getByText('Add Todo') as HTMLButtonElement;
28| input.value = 'mark new todo as completed';
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[4/6]⎯
Test Files 1 failed (1)
Tests 3 failed (3)
Start at 16:47:34
Duration 1.64s (transform 207ms, setup 236ms, collect 291ms, tests 23ms, environment 642ms, prepare 165ms)
FAIL Tests failed. Watching for file changes...
birkskyum commented
js vitest example as well