docs: update react-testing-lib example (#2263)

vitest-dev · Nov 7, 2022 · 10ec04d · 10ec04d
1 parent d1b5b36
commit 10ec04d
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 158 deletions.
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -19,7 +19,7 @@
     "@types/react": "latest",
     "@vitejs/plugin-react": "latest",
     "jsdom": "latest",
-    "typescript": "4.6.3",
+    "typescript": "^4.8.4",
     "vitest": "latest"
   }
 }
diff --git a/examples/react-storybook/package.json b/examples/react-storybook/package.json
@@ -34,7 +34,7 @@
     "jsdom": "latest",
     "msw": "^0.39.2",
     "msw-storybook-addon": "^1.6.3",
-    "typescript": "^4.7.2",
+    "typescript": "^4.8.4",
     "vite": "latest",
     "vitest": "latest"
   },

diff --git a/examples/react-testing-lib/package.json b/examples/react-testing-lib/package.json
@@ -10,19 +10,20 @@
     "test:ui": "vitest --ui"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^17.0.17",
-    "@vitejs/plugin-react": "^1.3.2",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^2.2.0",
+    "@vitest/coverage-c8": "^0.24.5",
     "@vitest/ui": "latest",
     "jsdom": "latest",
+    "typescript": "^4.8.4",
     "vite": "latest",
     "vitest": "latest"
   },

diff --git a/examples/react-testing-lib/src/App.test.tsx b/examples/react-testing-lib/src/App.test.tsx
@@ -1,4 +1,3 @@
-import { describe, expect, it } from 'vitest'
 import App from './App'
 import { render, screen, userEvent } from './utils/test-utils'
 

diff --git a/examples/react-testing-lib/src/components/input.test.tsx b/examples/react-testing-lib/src/components/input.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom'
 import { render, screen, userEvent } from '../utils/test-utils'
 import { Input } from './Input'
 
@@ -19,7 +18,7 @@ describe('Input', async () => {
       name: /email address/i,
     })).toBeInTheDocument()
   })
-  it('should change input value', () => {
+  it('should change input value', async () => {
     render(
       <Input
         name="email"
@@ -37,7 +36,7 @@ describe('Input', async () => {
       name: /email address/i,
     })
     expect(input).toBeInTheDocument()
-    userEvent.type(input, '1337')
+    await userEvent.type(input, '1337')
     expect(input).toHaveValue('1337')
   })
   it('should render the input with error', () => {

diff --git a/examples/react-testing-lib/src/hooks/useCounter.test.ts b/examples/react-testing-lib/src/hooks/useCounter.test.ts
@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks'
+import { act, renderHook } from '@testing-library/react'
 import { useCounter } from './useCounter'
 
 describe('useCounter', () => {

diff --git a/examples/react-testing-lib/src/main.tsx b/examples/react-testing-lib/src/main.tsx
@@ -1,11 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App'
 
-ReactDOM.render(
-  <React.StrictMode>
+createRoot(document.getElementById('root') as HTMLElement).render(
+  <StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root'),
+  </StrictMode>,
 )