Adding vitest to the template

Author: jherr

TODO.md

@@ -4,4 +4,5 @@
 - [x] Check to make sure it works on Windows
 - [ ] Error handling
 - [ ] Add tests
-- [ ] Better project README
+- [x] Add vitest to the projects
+- [x] Better project README

project-template/README.md.ejs

@@ -17,6 +17,14 @@ To build this application for production:
 <%= packageManager %> run build
 ```
 
+## Testing
+
+This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
+
+```bash
+<%= packageManager %> run test
+```
+
 ## Styling
 <% if (tailwind) { %>
 This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
@@ -136,14 +144,16 @@ From there you need to update your `vite.config.js` file to use the plugin:
 ```ts
 import { defineConfig } from "vite";
 import viteReact from "@vitejs/plugin-react";
-import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
-
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";<% if (tailwind) { %>
+import tailwindcss from "@tailwindcss/vite";
+<% } %>
+  
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     TanStackRouterVite(),
-    viteReact(),
-    // ...
+    viteReact()<% if (tailwind) { %>,
+    tailwindcss()<% } %>
   ],
 });
 ```

project-template/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "start": "vite --port 3000",
     "build": "vite build && tsc --noEmit",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@tanstack/react-router": "^1.104.1",
@@ -14,11 +15,14 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^26.0.0",
     "typescript": "^5.7.2",
     "vite": "^6.1.0",
+    "vitest": "^3.0.5",
     "web-vitals": "^4.2.4"
   }
 }

project-template/src/App.test.tsx.ejs

@@ -0,0 +1,10 @@
+import { describe, expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+
+describe("App", () => {
+  test("renders", () => {
+    render(<App />);
+    expect(screen.getByText("Learn React")).toBeDefined();
+  });
+});

project-template/vite.config.js.ejs

@@ -7,4 +7,8 @@ import tailwindcss from "@tailwindcss/vite";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [viteReact()<% if (tailwind) { %>, tailwindcss()<% } %>],
+  test: {
+    globals: true,
+    environment: "jsdom",
+  },
 });

src/index.ts

@@ -148,6 +148,10 @@ async function createApp(projectName: string, options: Required<Options>) {
     "./src/App.tsx.ejs",
     options.typescript ? undefined : "./src/App.jsx"
   );
+  await templateFile(
+    "./src/App.test.tsx.ejs",
+    options.typescript ? undefined : "./src/App.test.jsx"
+  );
 
   // Setup the main, reportWebVitals and index.html files
   if (options.typescript) {