feat(ct): react declaration merging hooks config

packages/playwright-ct-react/hooks.d.ts

@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
-export declare function beforeMount<HooksConfig>(
+export interface RegisterHooksConfig {}
+
+export declare function beforeMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig; App: () => JSX.Element }) => Promise<void | JSX.Element>
 ): void;
-export declare function afterMount<HooksConfig>(
+export declare function afterMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
 ): void;

packages/playwright-ct-react/index.d.ts

@@ -16,8 +16,9 @@
 
 import type { Locator } from 'playwright/test';
 import type { TestType } from '@playwright/experimental-ct-core';
+import type { RegisterHooksConfig } from './hooks';
 
-export interface MountOptions<HooksConfig> {
+export interface MountOptions<HooksConfig extends RegisterHooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -27,11 +28,11 @@ export interface MountResult extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig>(
+  mount<HooksConfig extends RegisterHooksConfig = RegisterHooksConfig>(
     component: JSX.Element,
     options?: MountOptions<HooksConfig>
   ): Promise<MountResult>;
 }>;
 
-export { defineConfig, PlaywrightTestConfig } from '@playwright/experimental-ct-core';
+export { defineConfig, type PlaywrightTestConfig } from '@playwright/experimental-ct-core';
 export { expect, devices } from 'playwright/test';

packages/playwright-ct-react17/hooks.d.ts

@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
-export declare function beforeMount<HooksConfig>(
+export interface RegisterHooksConfig {}
+
+export declare function beforeMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig; App: () => JSX.Element }) => Promise<void | JSX.Element>
 ): void;
-export declare function afterMount<HooksConfig>(
+export declare function afterMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
 ): void;

packages/playwright-ct-react17/index.d.ts

@@ -16,8 +16,9 @@
 
 import type { Locator } from 'playwright/test';
 import type { TestType } from '@playwright/experimental-ct-core';
+import type { RegisterHooksConfig } from './hooks';
 
-export interface MountOptions<HooksConfig> {
+export interface MountOptions<HooksConfig extends RegisterHooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -27,11 +28,11 @@ export interface MountResult extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig>(
+  mount<HooksConfig extends RegisterHooksConfig = RegisterHooksConfig>(
     component: JSX.Element,
     options?: MountOptions<HooksConfig>
   ): Promise<MountResult>;
 }>;
 
-export { defineConfig, PlaywrightTestConfig } from '@playwright/experimental-ct-core';
+export { defineConfig, type PlaywrightTestConfig } from '@playwright/experimental-ct-core';
 export { expect, devices } from 'playwright/test';

tests/components/ct-react-vite/playwright/index.tsx

@@ -2,18 +2,19 @@ import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks
 import { BrowserRouter } from 'react-router-dom';
 import '../src/assets/index.css';
 
-export type HooksConfig = {
+declare module '@playwright/experimental-ct-react/hooks' {
-  route?: string;
+  interface RegisterHooksConfig {
-  routing?: boolean;
+    routing?: boolean;
+  }
 }
 
-beforeMount<HooksConfig>(async ({ hooksConfig, App }) => {
+beforeMount(async ({ hooksConfig, App }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 
   if (hooksConfig?.routing)
      return <BrowserRouter><App /></BrowserRouter>;
 });
 
-afterMount<HooksConfig>(async () => {
+afterMount(async () => {
   console.log(`After mount`);
 });

tests/components/ct-react-vite/tests/react-router.spec.tsx

@@ -1,9 +1,8 @@
 import { test, expect } from '@playwright/experimental-ct-react';
 import App from '@/App';
-import type { HooksConfig } from '../playwright';
 
 test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(<App />, {
+  const component = await mount(<App />, {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('main')).toHaveText('Login');
@@ -14,7 +13,7 @@ test('navigate to a page by clicking a link', async ({ page, mount }) => {
 });
 
 test('update should not reset mount hooks', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(<App title='before'/>, {
+  const component = await mount(<App title='before'/>, {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('heading')).toHaveText('before');

tests/components/ct-react-vite/tsconfig.json

@@ -21,6 +21,5 @@
       "*": ["_"],
     }
   },
-  "include": ["src", "tests"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }