Add some additional examples

examples/directory/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "directory",
+  "version": "1.0.0",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "start": "vite dev",
+    "test": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stevekinney/testing-javascript.git"
+  },
+  "author": "Steve Kinney <hello@stevekinney.net>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/stevekinney/testing-javascript/issues"
+  },
+  "homepage": "https://github.com/stevekinney/testing-javascript#readme",
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/body-parser": "^1.19.5",
+    "@types/express": "^4.17.21",
+    "@types/react": "^18.3.6",
+    "@types/react-dom": "^18.3.0",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/ui": "^2.1.1",
+    "msw": "^2.4.9",
+    "vite": "^5.4.6",
+    "vitest": "^2.1.1"
+  }
+}

examples/directory/src/get-user.js

@@ -0,0 +1,11 @@
+export const getUser = async (id) => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/users/${id}`,
+  );
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch user');
+  }
+
+  return response.json();
+};

examples/directory/src/mocks/handlers.js

@@ -0,0 +1,5 @@
+import { http, HttpResponse } from 'msw';
+
+// Hint: https://jsonplaceholder.typicode.com/users/:id
+
+export const handlers = [];

examples/directory/src/mocks/server.js

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers);

examples/directory/src/mocks/tasks.json

@@ -0,0 +1,16 @@
+[
+  {
+    "id": "test-1",
+    "title": "Get a Phone Charger",
+    "completed": true,
+    "createdAt": "2024-09-19T08:30:00.711Z",
+    "lastModified": "2024-09-19T08:30:00.711Z"
+  },
+  {
+    "id": "test-2",
+    "title": "Charge Your Phone",
+    "completed": false,
+    "createdAt": "2024-09-19T08:31:00.261Z",
+    "lastModified": "2024-09-19T08:31:00.261Z"
+  }
+]

examples/directory/src/user.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { getUser } from './get-user';
+
+export const User = ({ id }) => {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    getUser(id).then(setUser);
+  }, [setUser]);
+
+  if (!user) {
+    return <p>Loading…</p>;
+  }
+
+  return (
+    <article data-testid={`user-${id}`}>
+      <h2>{user.name}</h2>
+      <table>
+        <tbody>
+          <tr>
+            <th>Company</th>
+            <td>{user.company.name}</td>
+          </tr>
+          <tr>
+            <th>Username</th>
+            <td>{user.username}</td>
+          </tr>
+          <tr>
+            <th>Email</th>
+            <td>{user.email}</td>
+          </tr>
+          <tr>
+            <th>Phone</th>
+            <td>{user.phone}</td>
+          </tr>
+          <tr>
+            <th>Website</th>
+            <td>{user.website}</td>
+          </tr>
+        </tbody>
+      </table>
+    </article>
+  );
+};

examples/directory/src/user.test.jsx

@@ -0,0 +1,10 @@
+import { screen, render } from '@testing-library/react';
+import { User } from './user';
+
+it.skip('should render a user', async () => {
+  // This calls an API. That's not great. We should mock it.
+  const id = 1;
+  render(<User id={id} />);
+
+  expect(user).toBeInTheDocument();
+});

examples/directory/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { css } from 'css-configuration';
+
+const PORT = process.env.PORT || 3000;
+
+export default defineConfig({
+  plugins: [react()],
+  css,
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['@testing-library/jest-dom/vitest'],
+  },
+});