feat(ct): resolve hooksConfig import refs (#31024)

closes https://github.com/microsoft/playwright/issues/30453

packages/playwright-ct-core/src/mount.ts

@@ -102,6 +102,7 @@ async function innerMount(page: Page, componentRef: JsxComponent | ImportRef, op
 
   const selector = await page.evaluate(async ({ component, hooksConfig }) => {
     component = await window.__pwUnwrapObject(component);
+    hooksConfig = await window.__pwUnwrapObject(hooksConfig);
     let rootElement = document.getElementById('root');
     if (!rootElement) {
       rootElement = document.createElement('div');

packages/playwright-ct-core/types/component.d.ts

@@ -14,11 +14,6 @@
  * limitations under the License.
  */
 
-type JsonPrimitive = string | number | boolean | null;
-type JsonValue = JsonPrimitive | JsonObject | JsonArray;
-type JsonArray = JsonValue[];
-export type JsonObject = { [Key in string]?: JsonValue };
-
 export type JsxComponent = {
   __pw_type: 'jsx',
   type: any,
@@ -47,10 +42,10 @@ declare global {
     playwrightMount(component: Component, rootElement: Element, hooksConfig?: any): Promise<void>;
     playwrightUnmount(rootElement: Element): Promise<void>;
     playwrightUpdate(rootElement: Element, component: Component): Promise<void>;
-    __pw_hooks_before_mount?: (<HooksConfig extends JsonObject = JsonObject>(
+    __pw_hooks_before_mount?: (<HooksConfig>(
       params: { hooksConfig?: HooksConfig; [key: string]: any }
     ) => Promise<any>)[];
-    __pw_hooks_after_mount?: (<HooksConfig extends JsonObject = JsonObject>(
+    __pw_hooks_after_mount?: (<HooksConfig>(
       params: { hooksConfig?: HooksConfig; [key: string]: any }
     ) => Promise<void>)[];
     // Can't start with __pw due to core reuse bindings logic for __pw*.

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

@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
-
-export declare function beforeMount<HooksConfig extends JsonObject>(
+export declare function beforeMount<HooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig; App: () => JSX.Element }) => Promise<void | JSX.Element>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
 ): void;

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

@@ -15,10 +15,9 @@
  */
 
 import type { Locator } from 'playwright/test';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 import type { TestType } from '@playwright/experimental-ct-core';
 
-export interface MountOptions<HooksConfig extends JsonObject> {
+export interface MountOptions<HooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -28,7 +27,7 @@ export interface MountResult extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig>(
     component: JSX.Element,
     options?: MountOptions<HooksConfig>
   ): Promise<MountResult>;

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

@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
-
-export declare function beforeMount<HooksConfig extends JsonObject>(
+export declare function beforeMount<HooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig; App: () => JSX.Element }) => Promise<void | JSX.Element>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
 ): void;

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

@@ -15,10 +15,9 @@
  */
 
 import type { Locator } from 'playwright/test';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 import type { TestType } from '@playwright/experimental-ct-core';
 
-export interface MountOptions<HooksConfig extends JsonObject> {
+export interface MountOptions<HooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -28,7 +27,7 @@ export interface MountResult extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig>(
     component: JSX.Element,
     options?: MountOptions<HooksConfig>
   ): Promise<MountResult>;

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

@@ -14,12 +14,11 @@
  * limitations under the License.
  */
 
-import { JSXElement } from "solid-js";
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
+import { JSXElement } from 'solid-js';
 
-export declare function beforeMount<HooksConfig extends JsonObject>(
+export declare function beforeMount<HooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig, App: () => JSXElement }) => Promise<void | JSXElement>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
 ): void;

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

@@ -15,10 +15,9 @@
  */
 
 import type { Locator } from 'playwright/test';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 import type { TestType } from '@playwright/experimental-ct-core';
 
-export interface MountOptions<HooksConfig extends JsonObject> {
+export interface MountOptions<HooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -28,7 +27,7 @@ export interface MountResult extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig>(
     component: JSX.Element,
     options?: MountOptions<HooksConfig>
   ): Promise<MountResult>;

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

@@ -15,15 +15,14 @@
  */
 
 import type { ComponentConstructorOptions, SvelteComponent } from 'svelte';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 
-export declare function beforeMount<HooksConfig extends JsonObject>(
+export declare function beforeMount<HooksConfig>(
   callback: (params: {
     hooksConfig?: HooksConfig,
     App: new (options: Partial<ComponentConstructorOptions>) => SvelteComponent
   }) => Promise<SvelteComponent | void>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig>(
   callback: (params: {
     hooksConfig?: HooksConfig;
     svelteComponent: SvelteComponent;

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

@@ -15,7 +15,6 @@
  */
 
 import type { Locator } from 'playwright/test';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime';
 import type { TestType } from '@playwright/experimental-ct-core';
 
@@ -23,7 +22,7 @@ type ComponentSlot = string | string[];
 type ComponentSlots = Record<string, ComponentSlot> & { default?: ComponentSlot };
 type ComponentEvents = Record<string, Function>;
 
-export interface MountOptions<HooksConfig extends JsonObject, Component extends SvelteComponent> {
+export interface MountOptions<HooksConfig, Component extends SvelteComponent> {
   props?: ComponentProps<Component>;
   slots?: ComponentSlots;
   on?: ComponentEvents;
@@ -39,7 +38,7 @@ export interface MountResult<Component extends SvelteComponent> extends Locator
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject, Component extends SvelteComponent = SvelteComponent>(
+  mount<HooksConfig, Component extends SvelteComponent = SvelteComponent>(
     component: new (...args: any[]) => Component,
     options?: MountOptions<HooksConfig, Component>
   ): Promise<MountResult<Component>>;

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

@@ -15,12 +15,11 @@
  */
 
 import type { App, ComponentPublicInstance } from 'vue';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 
-export declare function beforeMount<HooksConfig extends JsonObject>(
+export declare function beforeMount<HooksConfig>(
   callback: (params: { app: App; hooksConfig?: HooksConfig }) => Promise<void>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig>(
   callback: (params: {
     app: App;
     hooksConfig?: HooksConfig;

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

@@ -15,7 +15,6 @@
  */
 
 import type { Locator } from 'playwright/test';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 import type { TestType } from '@playwright/experimental-ct-core';
 
 type ComponentSlot = string | string[];
@@ -29,14 +28,14 @@ type ComponentProps<T> =
 	T extends (props: infer P, ...args: any) => any ? P :
 	{};
 
-export interface MountOptions<HooksConfig extends JsonObject, Component> {
+export interface MountOptions<HooksConfig, Component> {
   props?: ComponentProps<Component>;
   slots?: ComponentSlots;
   on?: ComponentEvents;
   hooksConfig?: HooksConfig;
 }
 
-export interface MountOptionsJsx<HooksConfig extends JsonObject> {
+export interface MountOptionsJsx<HooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -55,11 +54,11 @@ export interface MountResultJsx extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig>(
     component: JSX.Element,
     options: MountOptionsJsx<HooksConfig>
   ): Promise<MountResultJsx>;
-  mount<HooksConfig extends JsonObject, Component = unknown>(
+  mount<HooksConfig, Component = unknown>(
     component: Component,
     options?: MountOptions<HooksConfig, Component>
   ): Promise<MountResult<Component>>;

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

@@ -14,17 +14,16 @@
  * limitations under the License.
  */
 
-import { ComponentOptions } from 'vue';
-import { CombinedVueInstance, Vue, VueConstructor } from 'vue/types/vue';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
+import type { ComponentOptions } from 'vue';
+import type { CombinedVueInstance, Vue, VueConstructor } from 'vue/types/vue';
 
-export declare function beforeMount<HooksConfig extends JsonObject>(
-  callback: (params: { 
-    hooksConfig?: HooksConfig, 
-    Vue: VueConstructor<Vue>, 
+export declare function beforeMount<HooksConfig>(
+  callback: (params: {
+    hooksConfig?: HooksConfig,
+    Vue: VueConstructor<Vue>,
   }) => Promise<void | ComponentOptions<Vue> & Record<string, unknown>>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig>(
   callback: (params: {
     hooksConfig?: HooksConfig;
     instance: CombinedVueInstance<

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

@@ -15,7 +15,6 @@
  */
 
 import type { Locator } from 'playwright/test';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 import type { TestType } from '@playwright/experimental-ct-core';
 
 type Slot = string | string[];
@@ -29,14 +28,14 @@ type ComponentProps<T> =
 	T extends (props: infer P, ...args: any) => any ? P :
 	{};
 
-export interface MountOptions<HooksConfig extends JsonObject, Component> {
+export interface MountOptions<HooksConfig, Component> {
   props?: ComponentProps<Component>;
   slots?: ComponentSlots;
   on?: ComponentEvents;
   hooksConfig?: HooksConfig;
 }
 
-export interface MountOptionsJsx<HooksConfig extends JsonObject> {
+export interface MountOptionsJsx<HooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -55,11 +54,11 @@ export interface MountResultJsx extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig>(
     component: JSX.Element,
     options?: MountOptionsJsx<HooksConfig>
   ): Promise<MountResultJsx>;
-  mount<HooksConfig extends JsonObject, Component = unknown>(
+  mount<HooksConfig, Component = unknown>(
     component: Component,
     options?: MountOptions<HooksConfig, Component>
   ): Promise<MountResult<Component>>;

tests/components/ct-vue-vite/playwright/index.ts

@@ -4,14 +4,17 @@ import Button from '../src/components/Button.vue';
 import '../src/assets/index.css';
 
 export type HooksConfig = {
-  route?: string;
   routing?: boolean;
+  components?: Record<string, any>;
 }
 
 beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
-  if (hooksConfig?.routing) 
+  if (hooksConfig?.routing)
     app.use(router as any); // TODO: remove any and fix the various installed conflicting Vue versions
-  app.component('Button', Button);
+
+  for (const [name, component] of Object.entries(hooksConfig?.components || {}))
+    app.component(name, component);
+
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
 });
 

tests/components/ct-vue-vite/tests/slots/slots.spec.js

@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
 import DefaultSlot from '@/components/DefaultSlot.vue';
 import NamedSlots from '@/components/NamedSlots.vue';
+import Button from '@/components/Button.vue';
 
 test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
@@ -16,6 +17,9 @@ test('render a component as slot', async ({ mount }) => {
     slots: {
       default: '<Button title="Submit" />', // component is registered globally in /playwright/index.ts
     },
+    hooksConfig: {
+      components: { Button }
+    }
   });
   await expect(component).toContainText('Submit');
 });

tests/components/ct-vue-vite/tests/slots/slots.spec.ts

@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
 import DefaultSlot from '@/components/DefaultSlot.vue';
 import NamedSlots from '@/components/NamedSlots.vue';
+import Button from '@/components/Button.vue';
 
 test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
@@ -16,6 +17,9 @@ test('render a component as slot', async ({ mount }) => {
     slots: {
       default: '<Button title="Submit" />', // component is registered globally in /playwright/index.ts
     },
+    hooksConfig: {
+      components: { Button }
+    }
   });
   await expect(component).toContainText('Submit');
 });