Make Vitest helpers global

examples/accident-counter/vite.config.ts

@@ -6,4 +6,8 @@ import { css } from 'css-configuration';
 export default defineConfig({
   plugins: [react()],
   css,
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+  },
 });

examples/accident-counter/vitest.config.js

@@ -1,8 +0,0 @@
-import { mergeConfig } from 'vitest/config';
-import config from './vite.config';
-
-export default mergeConfig(config, {
-  test: {
-    environment: 'happy-dom',
-  },
-});

examples/button-factory/src/button.test.js

@@ -1,4 +1,3 @@
-import { it, expect, describe } from 'vitest';
 import { createButton } from './button.js';
 
 describe('createButton', () => {

examples/button-factory/src/local-storage.test.js

@@ -1,5 +1,3 @@
-import { it, expect } from 'vitest';
-
 it('should properly assign to localStorage', () => {
   const key = 'secret';
   const message = "It's a secret to everybody.";

examples/button-factory/src/secret-input.test.js

@@ -1,4 +1,3 @@
-import { describe, expect, it, beforeEach, vi, afterEach } from 'vitest';
 import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { createSecretInput } from './secret-input.js';

examples/button-factory/vitest.config.ts

@@ -3,5 +3,6 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
   test: {
     environment: 'happy-dom',
+    globals: true,
   },
 });

examples/calculator/vite.config.js

@@ -4,4 +4,8 @@ import { css } from 'css-configuration';
 export default defineConfig({
   assetsInclude: ['**/*.html'],
   css,
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+  },
 });

examples/calculator/vitest.config.js

@@ -1,8 +0,0 @@
-import { mergeConfig } from 'vitest/config';
-import config from './vite.config';
-
-export default mergeConfig(config, {
-  test: {
-    environment: 'happy-dom',
-  },
-});

examples/characters/vitest.config.js

@@ -1,5 +1,6 @@
 export default {
   test: {
     environment: 'node',
+    globals: true,
   },
 };

examples/guess-the-number/vitest.config.js

@@ -1,5 +1,6 @@
 export default {
   test: {
     environment: 'node',
+    globals: true,
   },
 };

examples/logjam/vitest.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+    globals: true,
+  },
+});

examples/task-list/src/actions.test.js

@@ -0,0 +1,11 @@
+import { setTasks } from './actions';
+
+describe('setTasks', () => {
+  it('creates a set-tasks action', () => {
+    const tasks = [{ id: '1', text: 'Task 1', completed: false }];
+    expect(setTasks(tasks)).toEqual({
+      type: 'set-tasks',
+      payload: tasks,
+    });
+  });
+});

examples/task-list/src/components/create-task.jsx

@@ -15,7 +15,7 @@ export const CreateTask = ({ onSubmit }) => {
     >
       <div>
         <label htmlFor="new-task-title" className="sr-only">
-          Title
+          Create Task
         </label>
         <div className="flex flex-row">
           <input

examples/task-list/src/components/task.jsx

@@ -1,5 +1,4 @@
 import { memo } from 'react';
-import { ChevronRightCircle } from 'lucide-react';
 import { DateTime } from './date-time';
 
 export const Task = memo(({ task, updateTask, removeTask }) => {
@@ -7,7 +6,7 @@ export const Task = memo(({ task, updateTask, removeTask }) => {
     <li className="block space-y-2 border-x border-t border-slate-300 bg-white p-4 first:rounded-t-md last:rounded-b-md last:border-b dark:border-slate-700">
       <header className="flex flex-row items-center gap-4">
         <label htmlFor={`toggle-${task.id}`} className="sr-only">
-          Mark Task as {task.completed ? 'Incomplete' : 'Complete'}
+          Completed?
         </label>
         <input
           id={`toggle-${task.id}`}
@@ -20,6 +19,7 @@ export const Task = memo(({ task, updateTask, removeTask }) => {
         <button
           className="button-small button-destructive button-ghost"
           onClick={() => removeTask(task.id)}
+          aria-label='Remove Task'
         >
           ❌
         </button>

examples/task-list/vite.config.ts

@@ -16,4 +16,9 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    setupFiles: ['@testing-library/jest-dom/vitest'],
+  },
 });

examples/task-list/vitest.config.js

@@ -1,8 +0,0 @@
-import { mergeConfig } from 'vite';
-import config from './vite.config';
-
-export default mergeConfig(config, {
-  test: {
-    environment: 'happy-dom',
-  },
-});

examples/utility-belt/src/index.js

@@ -0,0 +1 @@
+export * from './string-to-number';

examples/utility-belt/vitest.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+    globals: true,
+  },
+});

jsconfig.json

@@ -11,6 +11,6 @@
       "./*.html?raw": ["./*"]
     }
   },
-  "include": ["examples/**/*.js", "examples/accident-counter/src/reducer.ts"],
+  "include": ["examples/**/*.js"],
   "exclude": ["node_modules", "dist"]
 }