chore: unconflict ct test ports (#29332)

tests/playwright-test/esm.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './playwright-test-fixtures';
+import { test, expect, playwrightCtConfigText } from './playwright-test-fixtures';
 
 test('should load nested as esm when package.json has type module', async ({ runInlineTest }) => {
   const result = await runInlineTest({
@@ -481,10 +481,7 @@ test('should resolve no-extension import to .jsx file in ESM mode', async ({ run
 test('should resolve .js import to .tsx file in ESM mode for components', async ({ runInlineTest }) => {
   const result = await runInlineTest({
     'package.json': `{ "type": "module" }`,
-    'playwright.config.ts': `
+    'playwright.config.ts': playwrightCtConfigText,
-      import { defineConfig } from '@playwright/experimental-ct-react';
-      export default defineConfig({ projects: [{name: 'foo'}] });
-    `,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
 

tests/playwright-test/loader.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './playwright-test-fixtures';
+import { test, expect, playwrightCtConfigText } from './playwright-test-fixtures';
 import path from 'path';
 
 test('should return the location of a syntax error', async ({ runInlineTest }) => {
@@ -756,10 +756,7 @@ test('should resolve .js import to .tsx file in non-ESM mode', async ({ runInlin
 
 test('should resolve .js import to .tsx file in non-ESM mode for components', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': `
+    'playwright.config.ts': playwrightCtConfigText,
-      import { defineConfig } from '@playwright/experimental-ct-react';
-      export default defineConfig({ projects: [{name: 'foo'}] });
-    `,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
 

tests/playwright-test/playwright-test-fixtures.ts

@@ -437,3 +437,13 @@ export function parseTestRunnerOutput(output: string) {
     didNotRun,
   };
 }
+
+export const playwrightCtConfigText = `
+import { defineConfig } from '@playwright/experimental-ct-react';
+export default defineConfig({
+  use: {
+    ctPort: ${3200 + (+process.env.TEST_PARALLEL_INDEX)}
+  },
+  projects: [{name: 'default'}],
+});
+`;

tests/playwright-test/playwright.ct-build.spec.ts

@@ -14,24 +14,14 @@
  * limitations under the License.
  */
 
-import { test, expect } from './playwright-test-fixtures';
+import { test, expect, playwrightCtConfigText } from './playwright-test-fixtures';
 import fs from 'fs';
 
 test.describe.configure({ mode: 'parallel' });
 
-const playwrightConfig = `
-  import { defineConfig } from '@playwright/experimental-ct-react';
-  export default defineConfig({
-    use: {
-      ctPort: ${3200 + (+process.env.TEST_PARALLEL_INDEX)}
-    },
-    projects: [{name: 'foo'}],
-  });
-`;
-
 test('should work with the empty component list', async ({ runInlineTest }, testInfo) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.js"></script>`,
     'playwright/index.js': ``,
 
@@ -55,7 +45,7 @@ test('should work with the empty component list', async ({ runInlineTest }, test
 
 test('should extract component list', async ({ runInlineTest }, testInfo) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
 
@@ -202,7 +192,7 @@ test('should cache build', async ({ runInlineTest }, testInfo) => {
 
   await test.step('original test', async () => {
     const result = await runInlineTest({
-      'playwright.config.ts': playwrightConfig,
+      'playwright.config.ts': playwrightCtConfigText,
       'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
       'playwright/index.ts': ``,
 
@@ -229,7 +219,7 @@ test('should cache build', async ({ runInlineTest }, testInfo) => {
 
   await test.step('re-run same test', async () => {
     const result = await runInlineTest({
-      'playwright.config.ts': playwrightConfig,
+      'playwright.config.ts': playwrightCtConfigText,
     }, { workers: 1 });
     expect(result.exitCode).toBe(0);
     expect(result.passed).toBe(1);
@@ -239,7 +229,7 @@ test('should cache build', async ({ runInlineTest }, testInfo) => {
 
   await test.step('modify test', async () => {
     const result = await runInlineTest({
-      'playwright.config.ts': playwrightConfig,
+      'playwright.config.ts': playwrightCtConfigText,
       'src/button.test.tsx': `
           import { test, expect } from '@playwright/experimental-ct-react';
         import { Button } from './button.tsx';
@@ -258,7 +248,7 @@ test('should cache build', async ({ runInlineTest }, testInfo) => {
 
   await test.step('modify source', async () => {
     const result = await runInlineTest({
-      'playwright.config.ts': playwrightConfig,
+      'playwright.config.ts': playwrightCtConfigText,
       'src/button.tsx': `
         export const Button = () => <button>Button 2</button>;
       `,
@@ -275,7 +265,7 @@ test('should grow cache', async ({ runInlineTest }, testInfo) => {
 
   await test.step('original test', async () => {
     const result = await runInlineTest({
-      'playwright.config.ts': playwrightConfig,
+      'playwright.config.ts': playwrightCtConfigText,
       'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
       'playwright/index.ts': ``,
       'src/button1.tsx': `
@@ -310,7 +300,7 @@ test('should grow cache', async ({ runInlineTest }, testInfo) => {
 
   await test.step('run second test', async () => {
     const result = await runInlineTest({
-      'playwright.config.ts': playwrightConfig,
+      'playwright.config.ts': playwrightCtConfigText,
     }, { workers: 1 }, undefined, { additionalArgs: ['button2'] });
     expect(result.exitCode).toBe(0);
     expect(result.passed).toBe(1);
@@ -320,7 +310,7 @@ test('should grow cache', async ({ runInlineTest }, testInfo) => {
 
   await test.step('run first test again', async () => {
     const result = await runInlineTest({
-      'playwright.config.ts': playwrightConfig,
+      'playwright.config.ts': playwrightCtConfigText,
     }, { workers: 1 }, undefined, { additionalArgs: ['button2'] });
     expect(result.exitCode).toBe(0);
     expect(result.passed).toBe(1);
@@ -331,7 +321,7 @@ test('should grow cache', async ({ runInlineTest }, testInfo) => {
 
 test('should not use global config for preview', async ({ runInlineTest }) => {
   const result1 = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.js"></script>`,
     'playwright/index.js': ``,
     'vite.config.js': `
@@ -352,7 +342,7 @@ test('should not use global config for preview', async ({ runInlineTest }) => {
   expect(result1.passed).toBe(1);
 
   const result2 = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
   }, { workers: 1 });
   expect(result2.exitCode).toBe(0);
   expect(result2.passed).toBe(1);
@@ -391,7 +381,7 @@ test('should work with https enabled', async ({ runInlineTest }) => {
 
 test('list compilation cache should not clash with the run one', async ({ runInlineTest }) => {
   const listResult = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
     'src/button.tsx': `
@@ -419,7 +409,7 @@ test('should retain deps when test changes', async ({ runInlineTest }, testInfo)
 
   await test.step('original test', async () => {
     const result = await runInlineTest({
-      'playwright.config.ts': playwrightConfig,
+      'playwright.config.ts': playwrightCtConfigText,
       'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
       'playwright/index.ts': ``,
       'src/button.tsx': `
@@ -483,7 +473,7 @@ test('should retain deps when test changes', async ({ runInlineTest }, testInfo)
 
 test('should render component via re-export', async ({ runInlineTest }, testInfo) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
     'src/button.tsx': `
@@ -509,7 +499,7 @@ test('should render component via re-export', async ({ runInlineTest }, testInfo
 
 test('should render component exported via fixture', async ({ runInlineTest }, testInfo) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
     'src/button.tsx': `
@@ -539,7 +529,7 @@ test('should render component exported via fixture', async ({ runInlineTest }, t
 
 test('should pass imported images from test to component', async ({ runInlineTest }, testInfo) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
     'src/image.png': Buffer.from('iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAACMElEQVRYw+1XT0tCQRD/9Qci0Cw7mp1C6BMYnt5niMhPEEFCh07evNk54XnuGkhFehA/QxHkqYMEFWXpscMTipri7fqeu+vbfY+EoBkQ3Zn5zTo7MzsL/NNfoClkUUQNN3jCJ/ETfavRSpYkkSmFQzz8wMr4gaSp8OBJ2HCU4Iwd0kqGgd9GPxCccZ+0jWgWVW1wxlWy0qR51I3hv7lOllq7b4SC/+aGzr+QBadjEKgAykvzJGXwr/Lj4JfRk5hUSLKIa00HPUJRki0xeMWSWxVXmi5sddXKymqTyxdwquXAUVV3WREeLx3gTcNFWQY/jXtB8QIzgt4qTvAR4OCe0ATKCmrnmFMEM0Pp2BvrIisaFUdUjgKKZgYWSjjDLR5J+x13lATHuHSti6JBzQP+gq2QHXjfRaiJojbPgYqbmGFow0VpiyIW0/VIF9QKLzeBWA2MHmwCu8QJQV++Ps/joHQQH4HpuO0uobUeVztgIcr4Vnf4we9orWfUIWKHbEVyYKkPmaVpIVKICuo0ZYXWjHTITXWhsVYxkIDpUoKsla1i2Oz2QjvYG9fshu36GbFQ8DGyHNOuvRdOKZSDUtCFM7wyHeSM4XN8e7bOpd9F2gg+TRYal753bGkbuEjzMg0YW/yDV1czUDm+e43Byz86OnRwsYDMKXlmkYbeAOwffrtU/nGpXpwkXfPhVza+D9AiMAtrtOMYfVr0q8Wr1nh8n8ADZCJPqAk8AifyjP2n36cvkA6/Wln9MokAAAAASUVORK5CYII=', 'base64'),
@@ -559,7 +549,7 @@ test('should pass imported images from test to component', async ({ runInlineTes
 
 test('should pass dates, regex, urls and bigints', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
     'src/button.tsx': `
@@ -596,7 +586,7 @@ test('should pass dates, regex, urls and bigints', async ({ runInlineTest }) =>
 
 test('should pass undefined value as param', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
     'src/component.tsx': `

tests/playwright-test/playwright.ct-react.spec.ts

@@ -14,21 +14,11 @@
  * limitations under the License.
  */
 
-import { test, expect } from './playwright-test-fixtures';
+import { test, expect, playwrightCtConfigText } from './playwright-test-fixtures';
-
-const playwrightConfig = `
-  import { defineConfig } from '@playwright/experimental-ct-react';
-  export default defineConfig({
-    use: {
-      ctPort: ${3200 + (+process.env.TEST_PARALLEL_INDEX)}
-    },
-    projects: [{name: 'foo'}],
-  });
-`;
 
 test('should work with TSX', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': `
     `,
@@ -52,7 +42,7 @@ test('should work with TSX', async ({ runInlineTest }) => {
 
 test('should work with JSX', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.js"></script>`,
     'playwright/index.js': `
     `,
@@ -78,7 +68,7 @@ test('should work with JSX', async ({ runInlineTest }) => {
 
 test('should work with JSX in JS', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.js"></script>`,
     'playwright/index.js': `
     `,
@@ -104,7 +94,7 @@ test('should work with JSX in JS', async ({ runInlineTest }) => {
 
 test('should work with JSX in JS and in JSX', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.js"></script>`,
     'playwright/index.js': `
     `,
@@ -141,7 +131,7 @@ test('should work with JSX in JS and in JSX', async ({ runInlineTest }) => {
 
 test('should work with stray TSX import', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': `
     `,
@@ -172,7 +162,7 @@ test('should work with stray TSX import', async ({ runInlineTest }) => {
 
 test('should work with stray JSX import', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.js"></script>`,
     'playwright/index.js': `
     `,
@@ -203,7 +193,7 @@ test('should work with stray JSX import', async ({ runInlineTest }) => {
 
 test('should work with stray JS import', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.js"></script>`,
     'playwright/index.js': `
     `,
@@ -234,7 +224,7 @@ test('should work with stray JS import', async ({ runInlineTest }) => {
 
 test('should work with JSX in variable', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.js"></script>`,
     'playwright/index.js': `
     `,
@@ -262,7 +252,7 @@ test('should work with JSX in variable', async ({ runInlineTest }) => {
 
 test('should return root locator for fragments', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.js"></script>`,
     'playwright/index.js': ``,
 
@@ -288,7 +278,7 @@ test('should return root locator for fragments', async ({ runInlineTest }) => {
 
 test('should respect default property values', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
     'src/label.tsx': `
@@ -312,7 +302,7 @@ test('should respect default property values', async ({ runInlineTest }) => {
 
 test('should bundle public folder', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': `
     `,
@@ -345,7 +335,7 @@ test('should bundle public folder', async ({ runInlineTest }) => {
 
 test('should work with property expressions in JSX', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': `
     `,
@@ -470,7 +460,7 @@ test('should prioritize the vite host config over the baseUrl config', async ({
 
 test('should normalize children', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
     'src/component.tsx': `
@@ -504,7 +494,7 @@ test('should normalize children', async ({ runInlineTest }) => {
 
 test('should allow props children', async ({ runInlineTest }) => {
   const result = await runInlineTest({
-    'playwright.config.ts': playwrightConfig,
+    'playwright.config.ts': playwrightCtConfigText,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
     'src/component.spec.tsx': `

tests/playwright-test/watch.spec.ts

@@ -15,7 +15,7 @@
  */
 
 import path from 'path';
-import { test, expect } from './playwright-test-fixtures';
+import { test, expect, playwrightCtConfigText } from './playwright-test-fixtures';
 
 test.describe.configure({ mode: 'parallel' });
 
@@ -563,10 +563,7 @@ test('should not watch unfiltered files', async ({ runWatchTest, writeFiles }) =
 
 test('should run CT on changed deps', async ({ runWatchTest, writeFiles }) => {
   const testProcess = await runWatchTest({
-    'playwright.config.ts': `
+    'playwright.config.ts': playwrightCtConfigText,
-      import { defineConfig } from '@playwright/experimental-ct-react';
-      export default defineConfig({ projects: [{name: 'default'}] });
-    `,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
     'src/button.tsx': `
@@ -606,10 +603,7 @@ test('should run CT on changed deps', async ({ runWatchTest, writeFiles }) => {
 
 test('should run CT on indirect deps change', async ({ runWatchTest, writeFiles }) => {
   const testProcess = await runWatchTest({
-    'playwright.config.ts': `
+    'playwright.config.ts': playwrightCtConfigText,
-      import { defineConfig } from '@playwright/experimental-ct-react';
-      export default defineConfig({ projects: [{name: 'default'}] });
-    `,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,
     'src/button.css': `
@@ -652,10 +646,7 @@ test('should run CT on indirect deps change', async ({ runWatchTest, writeFiles
 
 test('should run CT on indirect deps change ESM mode', async ({ runWatchTest, writeFiles }) => {
   const testProcess = await runWatchTest({
-    'playwright.config.ts': `
+    'playwright.config.ts': playwrightCtConfigText,
-      import { defineConfig } from '@playwright/experimental-ct-react';
-      export default defineConfig({ projects: [{name: 'default'}] });
-    `,
     'package.json': `{ "type": "module" }`,
     'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
     'playwright/index.ts': ``,