chore: setup testing

Adds MSW
Adds Vitest
Creates a test using fake api call

package.json

@@ -7,10 +7,13 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "cross-fetch": "^3.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -23,11 +26,17 @@
     "@storybook/builder-vite": "^0.2.4",
     "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",
     "babel-loader": "^8.2.5",
+    "jsdom": "^20.0.3",
+    "msw": "^0.49.0",
     "typescript": "^4.6.4",
-    "vite": "^3.1.0"
+    "vite": "^3.1.0",
+    "vitest": "^0.25.3"
   }
 }

src/App.tsx

@@ -1,9 +1,27 @@
-import { useState } from 'react'
+import fetch from 'cross-fetch';
+import { useState, useEffect } from 'react'
 import reactLogo from './assets/react.svg'
 import './App.css'
 
+type User = {
+  id: number;
+  name: string;
+  username: string;
+}
+
+const fetchUser = async (): Promise<User> => {
+  const res = await fetch('https://jsonplaceholder.typicode.com/users/1')
+  const json: User  = await res.json();
+  return json;
+}
+
 function App() {
   const [count, setCount] = useState(0)
+  const [user, setUser] = useState<User | null>(null)
+
+  useEffect(() => {
+    fetchUser().then(user => setUser(user));
+  }, []);
 
   return (
     <div className="App">
@@ -27,6 +45,7 @@ function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
+      <span>{user?.username}</span>
     </div>
   )
 }

src/__tests__/App.spec.tsx

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import App from '../App'
+
+test('<App />', async () => {
+  render(<App />);
+  expect(await screen.findByText('MSWUser')).toBeInTheDocument();
+})

src/mocks/handlers.ts

@@ -0,0 +1,12 @@
+import { rest } from "msw";
+
+export const handlers = [
+  // Handles a GET /hello request
+  rest.get("https://jsonplaceholder.typicode.com/users/1", (_req, res, ctx)=> {
+    return res(ctx.status(200), ctx.json({
+      id: 1,
+      name: "MSW mocked name",
+      username: "MSWUser",
+    }))
+  }),
+];

src/mocks/server.ts

@@ -0,0 +1,6 @@
+// src/mocks/server.js
+import { setupServer } from 'msw/node'
+import { handlers } from './handlers'
+
+// This configures a request mocking server with the given request handlers.
+export const server = setupServer(...handlers)

src/setupTests.ts

@@ -0,0 +1,19 @@
+// src/setupTests.ts
+import { server } from './mocks/server.js'
+import { beforeAll, afterEach, afterAll } from 'vitest'
+
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
+
+// Establish API mocking before all tests.
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
+
+// Reset any request handlers that we may add during the tests,
+// so they don't affect other tests.
+afterEach(() => server.resetHandlers())
+
+// Clean up after the tests are finished.
+afterAll(() => server.close())

vite.config.ts

@@ -1,7 +1,14 @@
+/// <reference types="vitest" />
+
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
-})
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/setupTests.ts'],
+  },
+})