Update vitest templates

js-vitest/package.json

@@ -13,13 +13,13 @@
   "license": "MIT",
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
-    "jsdom": "^20.0.0",
+    "jsdom": "^20.0.3",
-    "solid-testing-library": "^0.3.0",
+    "@solidjs/testing-library": "^0.5.1",
-    "vite": "^3.0.9",
+    "vite": "^3.2.4",
-    "vite-plugin-solid": "^2.3.0",
+    "vite-plugin-solid": "^2.4.0",
-    "vitest": "^0.22.1"
+    "vitest": "^0.25.2"
   },
   "dependencies": {
-    "solid-js": "^1.5.1"
+    "solid-js": "^1.6.2"
   }
 }

js-vitest/setupVitest.js

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

js-vitest/src/todo-list.jsx

@@ -1,18 +1,14 @@
-import { For, createSignal } from 'solid-js';
+import { For } from 'solid-js';
+import { createStore } from 'solid-js/store';
 
 export const TodoList = () => {
   let input;
-  let todoId = 0;
+  const [todos, setTodos] = createStore([]);
-  const [todos, setTodos] = createSignal([]);
   const addTodo = (text) => {
-    setTodos([...todos(), { id: ++todoId, text, completed: false }]);
+    setTodos(todos.length, { id: todos.length, text, completed: false });
   };
   const toggleTodo = (id) => {
-    setTodos(
+    setTodos(id, 'completed', (c) => !c);
-      todos().map((todo) =>
-        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
-      ),
-    );
   };
 
   return (
@@ -29,7 +25,7 @@ export const TodoList = () => {
           Add Todo
         </button>
       </div>
-      <For each={todos()}>
+      <For each={todos}>
         {(todo) => {
           const { id, text } = todo;
           return (

js-vitest/src/todo-list.test.jsx

@@ -1,36 +1,28 @@
-import { describe, expect, test } from 'vitest';
+import { render, fireEvent } from '@solidjs/testing-library';
-
-import { render, fireEvent } from 'solid-testing-library';
 
 import { TodoList } from './todo-list';
 
 describe('<TodoList />', () => {
   test('it will render an text input and a button', () => {
-    const { getByPlaceholderText, getByText, unmount } = render(() => (
+    const { getByPlaceholderText, getByText } = render(() => <TodoList />);
-      <TodoList />
-    ));
     expect(getByPlaceholderText('new todo here')).toBeInTheDocument();
     expect(getByText('Add Todo')).toBeInTheDocument();
-    unmount();
   });
 
   test('it will add a new todo', async () => {
-    const { getByPlaceholderText, getByText, unmount } = render(() => (
+    const { getByPlaceholderText, getByText } = render(() => <TodoList />);
-      <TodoList />
-    ));
     const input = getByPlaceholderText('new todo here');
     const button = getByText('Add Todo');
     input.value = 'test new todo';
     fireEvent.click(button);
     expect(input.value).toBe('');
     expect(getByText(/test new todo/)).toBeInTheDocument();
-    unmount();
   });
 
   test('it will mark a todo as completed', async () => {
-    const { getByPlaceholderText, findByRole, getByText, unmount } = render(
+    const { getByPlaceholderText, findByRole, getByText } = render(() => (
-      () => <TodoList />,
+      <TodoList />
-    );
+    ));
     const input = getByPlaceholderText('new todo here');
     const button = getByText('Add Todo');
     input.value = 'mark new todo as completed';
@@ -41,6 +33,5 @@ describe('<TodoList />', () => {
     expect(completed?.checked).toBe(true);
     const text = getByText('mark new todo as completed');
     expect(text).toHaveStyle({ 'text-decoration': 'line-through' });
-    unmount();
   });
 });

js-vitest/vite.config.js

@@ -8,7 +8,9 @@ export default defineConfig({
     transformMode: {
       web: [/\.jsx?$/],
     },
-    setupFiles: './setupVitest.js',
+    setupFiles: ['node_modules/@testing-library/jest-dom/extend-expect.js'],
+    // otherwise, solid would be loaded twice:
+    deps: { registerNodeLoader: true },
     // if you have few tests, try commenting one
     // or both out to improve performance:
     // threads: false,

ts-vitest/package.json

@@ -12,16 +12,16 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@types/testing-library__jest-dom": "^5.14.3",
     "@testing-library/jest-dom": "^5.16.5",
-    "jsdom": "^20.0.0",
+    "@types/testing-library__jest-dom": "^5.14.5",
-    "solid-testing-library": "^0.3.0",
+    "jsdom": "^20.0.3",
-    "typescript": "^4.8.2",
+    "@solidjs/testing-library": "^0.5.1",
-    "vite": "^3.0.9",
+    "typescript": "^4.9.3",
-    "vite-plugin-solid": "^2.3.0",
+    "vite": "^3.2.4",
-    "vitest": "^0.22.1"
+    "vite-plugin-solid": "^2.4.0",
+    "vitest": "^0.25.2"
   },
   "dependencies": {
-    "solid-js": "^1.5.1"
+    "solid-js": "^1.6.2"
   }
 }

ts-vitest/setupVitest.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

ts-vitest/src/todo-list.test.tsx

@@ -1,40 +1,37 @@
-import { describe, expect, test } from 'vitest';
+import { render, fireEvent } from '@solidjs/testing-library';
-
-import { render, fireEvent } from 'solid-testing-library';
 
 import { TodoList } from './todo-list';
 
 describe('<TodoList />', () => {
   test('it will render an text input and a button', () => {
-    const { getByPlaceholderText, getByText, unmount } = render(() => <TodoList />);
+    const { getByPlaceholderText, getByText } = render(() => <TodoList />);
     expect(getByPlaceholderText('new todo here')).toBeInTheDocument();
     expect(getByText('Add Todo')).toBeInTheDocument();
-    unmount();
   });
 
   test('it will add a new todo', async () => {
-    const { getByPlaceholderText, getByText, unmount } = render(() => <TodoList />);
+    const { getByPlaceholderText, getByText } = render(() => <TodoList />);
     const input = getByPlaceholderText('new todo here') as HTMLInputElement;
     const button = getByText('Add Todo');
     input.value = 'test new todo';
     fireEvent.click(button as HTMLInputElement);
     expect(input.value).toBe('');
     expect(getByText(/test new todo/)).toBeInTheDocument();
-    unmount();
   });
-  
+
   test('it will mark a todo as completed', async () => {
-    const { getByPlaceholderText, findByRole, getByText, unmount } = render(() => <TodoList />);
+    const { getByPlaceholderText, findByRole, getByText } = render(() => (
+      <TodoList />
+    ));
     const input = getByPlaceholderText('new todo here') as HTMLInputElement;
     const button = getByText('Add Todo') as HTMLButtonElement;
     input.value = 'mark new todo as completed';
     fireEvent.click(button);
-    const completed = await findByRole('checkbox') as HTMLInputElement;
+    const completed = (await findByRole('checkbox')) as HTMLInputElement;
     expect(completed?.checked).toBe(false);
     fireEvent.click(completed);
     expect(completed?.checked).toBe(true);
     const text = getByText('mark new todo as completed') as HTMLSpanElement;
     expect(text).toHaveStyle({ 'text-decoration': 'line-through' });
-    unmount();
   });
 });

ts-vitest/src/todo-list.tsx

@@ -1,19 +1,17 @@
-import { For, createSignal } from 'solid-js';
+import { For } from 'solid-js';
+import { createStore } from 'solid-js/store';
 
-type Todo = { id: number, text: string, completed: boolean };
+type Todo = { id: number; text: string; completed: boolean };
 
 export const TodoList = () => {
   let input!: HTMLInputElement;
-  let todoId = 0;
+  const [todos, setTodos] = createStore<Todo[]>([]);
-  const [todos, setTodos] = createSignal<Todo[]>([])
   const addTodo = (text: string) => {
-    setTodos([...todos(), { id: ++todoId, text, completed: false }]);
+    setTodos(todos.length, { id: todos.length, text, completed: false });
-  }
+  };
   const toggleTodo = (id: number) => {
-    setTodos(todos().map(todo => 
+    setTodos(id, 'completed', (c) => !c);
-      todo.id === id ? { ...todo, completed: !todo.completed } : todo)
+  };
-    );
-  }
 
   return (
     <>
@@ -23,27 +21,33 @@ export const TodoList = () => {
           onClick={() => {
             if (!input.value.trim()) return;
             addTodo(input.value);
-            input.value = "";
+            input.value = '';
           }}
         >
           Add Todo
         </button>
       </div>
-      <For each={todos()}>
+      <For each={todos}>
-        {(todo) => {          
+        {(todo) => {
           const { id, text } = todo;
-          return <div>
+          return (
-            <input
+            <div>
-              type="checkbox"
+              <input
-              checked={todo.completed}
+                type="checkbox"
-              onchange={[toggleTodo, id]}
+                checked={todo.completed}
-            />
+                onchange={[toggleTodo, id]}
-            <span
+              />
-              style={{ "text-decoration": todo.completed ? "line-through" : "none" }}
+              <span
-            >{text}</span>
+                style={{
-          </div>
+                  'text-decoration': todo.completed ? 'line-through' : 'none',
+                }}
+              >
+                {text}
+              </span>
+            </div>
+          );
         }}
       </For>
     </>
   );
-}
+};

ts-vitest/tsconfig.json

@@ -8,6 +8,6 @@
     "esModuleInterop": true,
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
-    "types": ["vite/client"]
+    "types": ["vite/client", "@testing-library/jest-dom"]
   }
 }

ts-vitest/vite.config.ts

@@ -12,10 +12,10 @@ export default defineConfig({
   test: {
     environment: 'jsdom',
     globals: true,
-    transformMode: {
+    transformMode: { web: [/\.[jt]sx?$/] },
-      web: [/\.[jt]sx?$/],
+    setupFiles: ['node_modules/@testing-library/jest-dom/extend-expect.js'],
-    },
+    // otherwise, solid would be loaded twice:
-    setupFiles: './setupVitest.ts',
+    deps: { registerNodeLoader: true },
     // if you have few tests, try commenting one
     // or both out to improve performance:
     threads: false,