fix(components): make sure defineConfig(c1, c2) works (#28608)

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

@@ -62,5 +62,8 @@ export const test: TestType<
 export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
 export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
 export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
+export function defineConfig(config: PlaywrightTestConfig, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig;
+export function defineConfig<T>(config: PlaywrightTestConfig<T>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T>;
+export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T, W>;
 
 export { expect, devices } from 'playwright/test';

packages/playwright-ct-core/index.js

@@ -17,7 +17,7 @@
 const { test: baseTest, expect, devices, defineConfig: originalDefineConfig } = require('playwright/test');
 const { fixtures } = require('./lib/mount');
 
-const defineConfig = config => originalDefineConfig({
+const defineConfig = (config, ...configs) => originalDefineConfig({
   ...config,
   build: {
     ...config.build,
@@ -25,7 +25,7 @@ const defineConfig = config => originalDefineConfig({
       [require.resolve('./lib/tsxTransform')]
     ],
   }
-});
+}, ...configs);
 
 const test = baseTest.extend(fixtures);
 

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

@@ -62,5 +62,8 @@ export const test: TestType<
 export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
 export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
 export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
+export function defineConfig(config: PlaywrightTestConfig, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig;
+export function defineConfig<T>(config: PlaywrightTestConfig<T>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T>;
+export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T, W>;
 
 export { expect, devices } from 'playwright/test';

packages/playwright-ct-react/index.js

@@ -24,6 +24,6 @@ const plugin = () => {
     path.join(__dirname, 'registerSource.mjs'),
     () => import('@vitejs/plugin-react').then(plugin => plugin.default()));
 };
-const defineConfig = config => originalDefineConfig({ ...config, _plugins: [plugin] });
+const defineConfig = (config, ...configs) => originalDefineConfig({ ...config, _plugins: [plugin] }, ...configs);
 
 module.exports = { test, expect, devices, defineConfig };

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

@@ -62,5 +62,8 @@ export const test: TestType<
 export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
 export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
 export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
+export function defineConfig(config: PlaywrightTestConfig, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig;
+export function defineConfig<T>(config: PlaywrightTestConfig<T>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T>;
+export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T, W>;
 
 export { expect, devices } from 'playwright/test';

packages/playwright-ct-react17/index.js

@@ -24,6 +24,6 @@ const plugin = () => {
     path.join(__dirname, 'registerSource.mjs'),
     () => import('@vitejs/plugin-react').then(plugin => plugin.default()));
 };
-const defineConfig = config => originalDefineConfig({ ...config, _plugins: [plugin] });
+const defineConfig = (config, ...configs) => originalDefineConfig({ ...config, _plugins: [plugin] }, ...configs);
 
 module.exports = { test, expect, devices, defineConfig };

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

@@ -62,5 +62,8 @@ export const test: TestType<
 export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
 export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
 export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
+export function defineConfig(config: PlaywrightTestConfig, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig;
+export function defineConfig<T>(config: PlaywrightTestConfig<T>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T>;
+export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T, W>;
 
 export { expect, devices } from 'playwright/test';

packages/playwright-ct-solid/index.js

@@ -24,6 +24,6 @@ const plugin = () => {
     path.join(__dirname, 'registerSource.mjs'),
     () => import('vite-plugin-solid').then(plugin => plugin.default()));
 };
-const defineConfig = config => originalDefineConfig({ ...config, _plugins: [plugin] });
+const defineConfig = (config, ...configs) => originalDefineConfig({ ...config, _plugins: [plugin] }, ...configs);
 
 module.exports = { test, expect, devices, defineConfig };

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

@@ -70,5 +70,8 @@ export const test: TestType<
 export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
 export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
 export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
+export function defineConfig(config: PlaywrightTestConfig, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig;
+export function defineConfig<T>(config: PlaywrightTestConfig<T>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T>;
+export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T, W>;
 
 export { expect, devices } from 'playwright/test';

packages/playwright-ct-svelte/index.js

@@ -24,6 +24,6 @@ const plugin = () => {
     path.join(__dirname, 'registerSource.mjs'),
     () => import('@sveltejs/vite-plugin-svelte').then(plugin => plugin.svelte()));
 };
-const defineConfig = config => originalDefineConfig({ ...config, _plugins: [plugin] });
+const defineConfig = (config, ...configs) => originalDefineConfig({ ...config, _plugins: [plugin] }, ...configs);
 
 module.exports = { test, expect, devices, defineConfig };

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

@@ -90,5 +90,8 @@ export const test: TestType<
 export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
 export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
 export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
+export function defineConfig(config: PlaywrightTestConfig, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig;
+export function defineConfig<T>(config: PlaywrightTestConfig<T>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T>;
+export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T, W>;
 
 export { expect, devices } from 'playwright/test';

packages/playwright-ct-vue/index.js

@@ -24,6 +24,6 @@ const plugin = () => {
     path.join(__dirname, 'registerSource.mjs'),
     () => import('@vitejs/plugin-vue').then(plugin => plugin.default()));
 }
-const defineConfig = config => originalDefineConfig({ ...config, _plugins: [plugin] });
+const defineConfig = (config, ...configs) => originalDefineConfig({ ...config, _plugins: [plugin] }, ...configs);
 
 module.exports = { test, expect, devices, defineConfig };

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

@@ -90,5 +90,8 @@ export const test: TestType<
 export function defineConfig(config: PlaywrightTestConfig): PlaywrightTestConfig;
 export function defineConfig<T>(config: PlaywrightTestConfig<T>): PlaywrightTestConfig<T>;
 export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>): PlaywrightTestConfig<T, W>;
+export function defineConfig(config: PlaywrightTestConfig, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig;
+export function defineConfig<T>(config: PlaywrightTestConfig<T>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T>;
+export function defineConfig<T, W>(config: PlaywrightTestConfig<T, W>, ...configs: PlaywrightTestConfig[]): PlaywrightTestConfig<T, W>;
 
 export { expect, devices } from 'playwright/test';

packages/playwright-ct-vue2/index.js

@@ -24,6 +24,6 @@ const plugin = () => {
     path.join(__dirname, 'registerSource.mjs'),
     () => import('@vitejs/plugin-vue2').then(plugin => plugin.default()));
 };
-const defineConfig = config => originalDefineConfig({ ...config, _plugins: [plugin] });
+const defineConfig = (config, ...configs) => originalDefineConfig({ ...config, _plugins: [plugin] }, ...configs);
 
 module.exports = { test, expect, devices, defineConfig };

packages/playwright/src/common/configLoader.ts

@@ -42,6 +42,10 @@ export const defineConfig = (...configs: any[]) => {
         ...result.use,
         ...config.use,
       },
+      build: {
+        ...result.build,
+        ...config.build,
+      },
       webServer: [
         ...(Array.isArray(result.webServer) ? result.webServer : (result.webServer ? [result.webServer] : [])),
         ...(Array.isArray(config.webServer) ? config.webServer : (config.webServer ? [config.webServer] : [])),

tests/playwright-test/config.spec.ts

@@ -557,3 +557,37 @@ test('should merge configs', async ({ runInlineTest }) => {
   });
   expect(result.exitCode).toBe(0);
 });
+
+test('should merge ct configs', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': `
+      import { defineConfig, expect } from '@playwright/experimental-ct-react';
+      const baseConfig = defineConfig({
+        timeout: 10,
+        use: {
+          foo: 1,
+        },
+      });
+      const derivedConfig = defineConfig(baseConfig, {
+        grep: 'hi',
+        use: {
+          bar: 2,
+        },
+      });
+
+      // Make sure ct-specific properties are preserved
+      // and config properties are merged.
+      expect(derivedConfig).toEqual(expect.objectContaining({
+        use: { foo: 1, bar: 2 },
+        grep: 'hi',
+        build: { babelPlugins: [expect.anything()] },
+        _plugins: [expect.anything()],
+      }));
+    `,
+    'a.test.ts': `
+      import { test } from '@playwright/experimental-ct-react';
+      test('pass', async ({}) => {});
+    `
+  });
+  expect(result.exitCode).toBe(0);
+});

tests/playwright-test/types.spec.ts

@@ -268,6 +268,26 @@ test('should check types of fixtures', async ({ runTSC }) => {
         },
       });
     `,
+    'playwright-define-merge.config.ts': `
+      import { defineConfig } from '@playwright/test';
+      const config0 = defineConfig({
+        timeout: 1,
+        // @ts-expect-error
+        grep: 23,
+      }, {
+        timeout: 2,
+      });
+    `,
+    'playwright-define-merge-ct.config.ts': `
+      import { defineConfig } from '@playwright/experimental-ct-vue';
+      const config0 = defineConfig({
+        timeout: 1,
+        // @ts-expect-error
+        grep: 23,
+      }, {
+        timeout: 2,
+      });
+    `,
   });
   expect(result.exitCode).toBe(0);
 });