Skip to content

ts-vitest template broken #135

@awhitford

Description

@awhitford

The ts-vitest template does not work.

Follow these steps to reproduce:

  1. pnpx degit solidjs/templates/ts-vitest aw-ts-vitest
  2. cd aw-ts-vitest
  3. pnpm install
  4. pnpm test

3 tests fail

> [email protected] 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/@[email protected]/node_modules/@testing-library/dom/dist/config.js:37:19
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 ❯ getByPlaceholderText node_modules/.pnpm/@[email protected]/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/@[email protected][email protected]/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/@[email protected][email protected]/node_modules/@solidjs/testing-library/dist/index.js:103:21
 ❯ node_modules/.pnpm/@[email protected][email protected]/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/@[email protected]/node_modules/@testing-library/dom/dist/config.js:37:19
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 ❯ getByPlaceholderText node_modules/.pnpm/@[email protected]/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/@[email protected]/node_modules/@testing-library/dom/dist/config.js:37:19
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 ❯ getByPlaceholderText node_modules/.pnpm/@[email protected]/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...

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions