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",
-    "solid-testing-library": "^0.3.0",
-    "vite": "^3.0.9",
-    "vite-plugin-solid": "^2.3.0",
-    "vitest": "^0.22.1"
+    "jsdom": "^20.0.3",
+    "@solidjs/testing-library": "^0.5.1",
+    "vite": "^3.2.4",
+    "vite-plugin-solid": "^2.4.0",
+    "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] = createSignal([]);
+  const [todos, setTodos] = createStore([]);
   const addTodo = (text) => {
-    setTodos([...todos(), { id: ++todoId, text, completed: false }]);
+    setTodos(todos.length, { id: todos.length, text, completed: false });
   };
   const toggleTodo = (id) => {
-    setTodos(
-      todos().map((todo) =>
-        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
-      ),
-    );
+    setTodos(id, 'completed', (c) => !c);
   };
 
   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 'solid-testing-library';
+import { render, fireEvent } from '@solidjs/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');
     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(
-      () => <TodoList />,
-    );
+    const { getByPlaceholderText, findByRole, getByText } = render(() => (
+      <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,