feat(tests): better test tools and examples (#3)

* feat(tests): add jest-dom/vitest for extended dom matchers support

* feat(tests): update selectors

* feat(tests): code review Co-authored-by: Matthieu Izoulet [email protected]

Author: dcaldastp

package-lock.json

@@ -30,8 +30,9 @@
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",

package.json

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'

setup-tests.ts

@@ -1,28 +1,34 @@
-import { render, screen, cleanup, fireEvent } from '@testing-library/react'
+import { render, screen, cleanup } from '@testing-library/react'
 import { expect, test, afterEach } from 'vitest'
+import userEvent from '@testing-library/user-event'
 
 import App from './app'
 
 // Vitest API Reference: https://vitest.dev/api/
-// Testing Library Events: https://testing-library.com/docs/dom-testing-library/api-events
+// Testing Library User Events: https://testing-library.com/docs/user-event/intro/
 // Testing Library Queries: https://testing-library.com/docs/queries/about
 
 afterEach(cleanup)
 
 test('renders app component', () => {
   render(<App />)
 
-  expect(screen.getByTestId('title').textContent).toEqual('Hello there 👋')
+  expect(screen.getByRole('heading')).toBeInTheDocument()
+  expect(screen.getByRole('heading').textContent).toEqual('Hello there 👋')
 })
 
-test('increments and decrements counter', () => {
+test('increments and decrements counter', async () => {
+  const user = userEvent.setup()
   render(<App />)
 
-  expect(screen.getByTestId('count').textContent).toEqual('0')
+  expect(screen.getByRole('status')).toBeInTheDocument()
+  expect(screen.getByRole('status').textContent).toEqual('0')
 
-  fireEvent.click(screen.getByTestId('inc'))
-  expect(screen.getByTestId('count').textContent).toEqual('1')
+  expect(screen.getByRole('button', { name: '+' })).toBeEnabled()
+  await user.click(screen.getByRole('button', { name: '+' }))
+  expect(screen.getByRole('status').getAttribute('disabled'))
 
-  fireEvent.click(screen.getByTestId('dec'))
-  expect(screen.getByTestId('count').textContent).toEqual('0')
+  expect(screen.getByRole('button', { name: '-' })).toBeEnabled()
+  await user.click(screen.getByRole('button', { name: '-' }))
+  expect(screen.getByRole('status').textContent).toEqual('0')
 })

src/app.test.tsx

@@ -24,13 +24,13 @@ function App() {
 
   return (
     <Container>
-      <h2 data-testid="title">Hello there 👋</h2>
-      <h2 data-testid="count">{count}</h2>
+      <h2 role="heading">Hello there 👋</h2>
+      <h2 role="status">{count}</h2>
       <Actions>
-        <button data-testid="inc" onClick={() => setCount((prev) => prev + 1)}>
+        <button type="button" onClick={() => setCount((prev) => prev + 1)}>
           +
         </button>
-        <button data-testid="dec" onClick={() => setCount((prev) => prev - 1)}>
+        <button type="button" onClick={() => setCount((prev) => prev - 1)}>
           -
         </button>
       </Actions>

src/app.tsx

@@ -4,7 +4,7 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "types": ["vitest/globals"],
+    "types": ["vitest/globals", "@testing-library/jest-dom/vitest"],
     "module": "ESNext",
     "skipLibCheck": true,
 

tsconfig.json

@@ -6,5 +6,6 @@ export default defineConfig({
   plugins: [react()],
   test: {
     environment: 'jsdom',
+    setupFiles: ['./setup-tests.ts'],
   }
 })