test: make react example more stable (#6324)

vitest-dev · Aug 12, 2024 · 93abfa0 · 93abfa0
1 parent 91dea8c
commit 93abfa0
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/examples/react/test/basic.test.tsx b/examples/react/test/basic.test.tsx
@@ -14,9 +14,9 @@ test('Link changes the state when hovered', async () => {
 
   await userEvent.hover(link)
 
-  expect(link).toHaveAccessibleName('Link is hovered')
+  await expect.poll(() => link).toHaveAccessibleName('Link is hovered')
 
   await userEvent.unhover(link)
 
-  expect(link).toHaveAccessibleName('Link is normal')
+  await expect.poll(() => link).toHaveAccessibleName('Link is normal')
 })
diff --git a/test/browser/test/userEvent.test.ts b/test/browser/test/userEvent.test.ts
@@ -12,6 +12,8 @@ const userEvent = _uE.setup()
 describe('userEvent.click', () => {
   test('correctly clicks a button', async () => {
     const button = document.createElement('button')
+    button.style.height = '100px'
+    button.style.width = '200px'
     button.textContent = 'Click me'
     document.body.appendChild(button)
     const onClick = vi.fn()

diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts
@@ -51,7 +51,7 @@ test.describe('ui', () => {
     // report
     const sample = page.getByTestId('details-panel').getByLabel('sample.test.ts')
     await sample.hover()
-    await sample.getByTestId('btn-open-details').click()
+    await sample.getByTestId('btn-open-details').click({ force: true })
     await page.getByText('All tests passed in this file').click()
 
     // graph tab
@@ -75,7 +75,7 @@ test.describe('ui', () => {
     await page.goto(pageUrl)
     const item = page.getByLabel('fixtures/console.test.ts')
     await item.hover()
-    await item.getByTestId('btn-open-details').click()
+    await item.getByTestId('btn-open-details').click({ force: true })
     await page.getByTestId('btn-console').click()
     await page.getByText('/(?<char>\\w)/').click()
 
@@ -87,7 +87,7 @@ test.describe('ui', () => {
     await page.goto(pageUrl)
     const item = page.getByLabel('fixtures/error.test.ts')
     await item.hover()
-    await item.getByTestId('btn-open-details').click()
+    await item.getByTestId('btn-open-details').click({ force: true })
     await expect(page.getByTestId('diff')).toContainText('- Expected + Received + <style>* {border: 2px solid green};</style>')
   })