➕ chore(deps-dev): add dependency @testing-library/user-event

package-lock.json

@@ -13,6 +13,7 @@
       },
       "devDependencies": {
         "@testing-library/react": "^14.1.2",
+        "@testing-library/user-event": "^14.5.2",
         "@types/react": "^18.2.43",
         "@types/react-dom": "^18.2.17",
         "@typescript-eslint/eslint-plugin": "^6.14.0",
@@ -1245,6 +1246,19 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.5.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz",
+      "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",

package.json

@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",

src/App.test.tsx

@@ -1,18 +1,62 @@
 // Imports
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import userEvent  from '@testing-library/user-event';
 
 // To Test
 import App from './App';
 
 // Tests
 describe('Renders main page correctly', async () => {
+    /**
+     * Resets all renders after each test
+     */
+    afterEach(() => {
+        cleanup();
+    });
+
+    /**
+     * Passes - shows title correctly
+     */
     it('Should render the page correctly', async () => {
         // Setup
-        render(<App />);
+        await render(<App />);
         const h1 = await screen.queryByText('Vite + React');
 
-        // Expectations
+        // Post Expectations
         expect(h1).not.toBeNull();
     });
+
+    /**
+     * Passes - shows the button count correctly present
+     */
+    it('Should show the button count set to 0', async () => {
+        // Setup
+        await render(<App />);
+        const button = await screen.queryByText('count is 0');
+
+        // Expectations
+        expect(button).not.toBeNull();
+    });
+
+    /**
+     * Passes - clicks the button 3 times and shows the correct count
+     */
+    it('Should show the button count set to 3', async () => {
+        // Setup
+        const user = userEvent.setup();
+        await render(<App />);
+        const button = await screen.queryByText('count is 0');
+
+        // Pre Expectations
+        expect(button).not.toBeNull();
+
+        // Actions
+        await user.click(button as HTMLElement);
+        await user.click(button as HTMLElement);
+        await user.click(button as HTMLElement);
+
+        // Post Expectations
+        expect(button?.innerHTML).toBe('count is 3');
+    });
 });