fix(browser): user event cleanup on retry (#6764)

hi-ogawa · web-flow · commit bdd15dd1ac67 · 2024-10-22T09:50:55.000+02:00
diff --git a/packages/browser/src/client/tester/runner.ts b/packages/browser/src/client/tester/runner.ts
@@ -40,8 +40,12 @@ export function createBrowserRunner(
       this.config = options.config
     }
 
-    onAfterRunTask = async (task: Task) => {
+    onBeforeTryTask: VitestRunner['onBeforeTryTask'] = async (...args) => {
       await userEvent.cleanup()
+      await super.onBeforeTryTask?.(...args)
+    }
+
+    onAfterRunTask = async (task: Task) => {
       await super.onAfterRunTask?.(task)
 
       if (this.config.bail && task.result?.state === 'fail') {
diff --git a/packages/browser/src/client/tester/tester.ts b/packages/browser/src/client/tester/tester.ts
@@ -1,5 +1,5 @@
 import { SpyModule, collectTests, setupCommonEnv, startCoverageInsideWorker, startTests, stopCoverageInsideWorker } from 'vitest/browser'
-import { page } from '@vitest/browser/context'
+import { page, userEvent } from '@vitest/browser/context'
 import type { IframeMockEvent, IframeMockInvalidateEvent, IframeUnmockEvent } from '@vitest/browser/client'
 import { channel, client, onCancel, waitForChannel } from '@vitest/browser/client'
 import { executor, getBrowserState, getConfig, getWorkerState } from '../utils'
@@ -168,6 +168,9 @@ async function executeTests(method: 'run' | 'collect', files: string[]) {
       if (cleanupSymbol in page) {
         (page[cleanupSymbol] as any)()
       }
+      // need to cleanup for each tester
+      // since playwright keybaord API is stateful on page instance level
+      await userEvent.cleanup()
     }
     catch (error: any) {
       await client.rpc.onUnhandledError({
diff --git a/test/browser/fixtures/user-event/cleanup-retry.test.ts b/test/browser/fixtures/user-event/cleanup-retry.test.ts
@@ -0,0 +1,31 @@
+import { expect, onTestFinished, test } from 'vitest'
+import { userEvent } from '@vitest/browser/context'
+
+test('cleanup retry', { retry: 1 }, async (ctx) => {
+  let logs: any[] = [];
+  function handler(e: KeyboardEvent) {
+    logs.push([e.key, e.altKey]);
+  };
+  document.addEventListener('keydown', handler)
+  onTestFinished(() => {
+    document.removeEventListener('keydown', handler);
+  })
+
+  await userEvent.keyboard('{Tab}')
+  await userEvent.keyboard("{Alt>}")
+  if (ctx.task.result.retryCount === 0) {
+    throw new Error("test retry")
+  }
+  expect(logs).toEqual(
+    [
+      [
+        "Tab",
+        false,
+      ],
+      [
+        "Alt",
+        true,
+      ],
+    ]
+  )
+})
diff --git a/test/browser/specs/runner.test.ts b/test/browser/specs/runner.test.ts
@@ -144,6 +144,7 @@ test('user-event', async () => {
   })
   expect(Object.fromEntries(ctx.state.getFiles().map(f => [f.name, f.result.state]))).toMatchInlineSnapshot(`
     {
+      "cleanup-retry.test.ts": "pass",
       "cleanup1.test.ts": "pass",
       "cleanup2.test.ts": "pass",
     }

Original file line number	Diff line number	Diff line change
`@@ -144,6 +144,7 @@ test('user-event', async () => {`
`144`	`144`	`})`
`145`	`145`	expect(Object.fromEntries(ctx.state.getFiles().map(f => [f.name, f.result.state]))).toMatchInlineSnapshot(`
`146`	`146`	`{`
	`147`	`+ "cleanup-retry.test.ts": "pass",`
`147`	`148`	`"cleanup1.test.ts": "pass",`
`148`	`149`	`"cleanup2.test.ts": "pass",`
`149`	`150`	`}`