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

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');
+    });
 });