fix ts

playwright/fixtures/render.tsx

@@ -4,8 +4,6 @@ import type { Locator, TestFixture } from '@playwright/test';
 import type router from 'next/router';
 import React from 'react';
 
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
-
 import type { Props as TestAppProps } from 'playwright/TestApp';
 import TestApp from 'playwright/TestApp';
 
@@ -14,15 +12,13 @@ interface MountResult extends Locator {
   update(component: JSX.Element): Promise<void>;
 }
 
-type Mount = <HooksConfig extends JsonObject>(component: JSX.Element, options?: MountOptions<HooksConfig>) => Promise<MountResult>;
-
-interface Options extends JsonObject {
-  hooksConfig?: {
+interface AppHooksConfig {
   router: Partial<Pick<typeof router, 'query' | 'isReady' | 'asPath' | 'pathname'>>;
-  };
 }
 
-export type RenderFixture = (component: JSX.Element, options?: Options, props?: Omit<TestAppProps, 'children'>) => Promise<MountResult>
+type Mount = <HooksConfig extends AppHooksConfig>(component: JSX.Element, options?: MountOptions<HooksConfig>) => Promise<MountResult>
+
+export type RenderFixture = (component: JSX.Element, options?: MountOptions<AppHooksConfig>, props?: Omit<TestAppProps, 'children'>) => Promise<MountResult>
 
 const fixture: TestFixture<RenderFixture, { mount: Mount }> = async({ mount }, use) => {
   await use((component, options, props) => {

playwright/lib.tsx

 /* eslint-disable no-console */
 import { test as base } from '@playwright/experimental-ct-react';
+import type { Page } from '@playwright/test';
 
 import * as injectMetaMaskProvider from './fixtures/injectMetaMaskProvider';
 import * as mockApiResponse from './fixtures/mockApiResponse';
@@ -13,7 +14,7 @@ import * as mockTextAd from './fixtures/mockTextAd';
 import * as render from './fixtures/render';
 import * as socketServer from './fixtures/socketServer';
 
-interface Fixtures {
+export interface Fixtures {
   render: render.RenderFixture;
   mockApiResponse: mockApiResponse.MockApiResponseFixture;
   mockAssetResponse: mockAssetResponse.MockAssetResponseFixture;
@@ -27,6 +28,8 @@ interface Fixtures {
   mockTextAd: mockTextAd.MockTextAdFixture;
 }
 
+export type TestFnArgs = Fixtures & { page: Page };
+
 const test = base.extend<Fixtures>({
   render: render.default,
   mockApiResponse: mockApiResponse.default,

ui/marketplace/MarketplaceAppModal.pw.tsx

@@ -4,6 +4,7 @@ import type { MarketplaceAppWithSecurityReport } from 'types/client/marketplace'
 
 import { apps as appsMock } from 'mocks/apps/apps';
 import { securityReports as securityReportsMock } from 'mocks/apps/securityReports';
+import type { TestFnArgs } from 'playwright/lib';
 import { test, expect, devices } from 'playwright/lib';
 
 import MarketplaceAppModal from './MarketplaceAppModal';
@@ -28,7 +29,7 @@ const props = {
   canRate: undefined,
 };
 
-const testFn: Parameters<typeof test>[1] = async({ render, page, mockAssetResponse, mockEnvs }) => {
+const testFn = async({ render, page, mockAssetResponse, mockEnvs }: TestFnArgs) => {
   await mockEnvs([
     [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY', 'test' ],
     [ 'NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID', 'test' ],

ui/pages/MarketplaceApp.pw.tsx

@@ -6,6 +6,7 @@ import config from 'configs/app';
 import { apps as appsMock } from 'mocks/apps/apps';
 import { ratings as ratingsMock } from 'mocks/apps/ratings';
 import { securityReports as securityReportsMock } from 'mocks/apps/securityReports';
+import type { TestFnArgs } from 'playwright/lib';
 import { test, expect, devices } from 'playwright/lib';
 
 import MarketplaceApp from './MarketplaceApp';
@@ -20,7 +21,7 @@ const hooksConfig = {
 const MARKETPLACE_CONFIG_URL = 'http://localhost:4000/marketplace-config.json';
 const MARKETPLACE_SECURITY_REPORTS_URL = 'http://localhost:4000/marketplace-security-reports.json';
 
-const testFn: Parameters<typeof test>[1] = async({ render, mockConfigResponse, mockAssetResponse, mockEnvs, mockRpcResponse, page }) => {
+const testFn = async({ render, mockConfigResponse, mockAssetResponse, mockEnvs, mockRpcResponse, page }: TestFnArgs) => {
   await mockEnvs([
     [ 'NEXT_PUBLIC_MARKETPLACE_ENABLED', 'true' ],
     [ 'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL ],