component tests: run on real mergeTest for pw >= 1.39

docs/component-tests.md

@@ -75,4 +75,7 @@ Update `test-ct` command in `package.json` to run `bddgen` before running Playwr
 Finally, run tests:
 ```
 npm run test-ct
-```
+```
+
+> If you stick to Playwright < 1.39 but need component tests, you can use this
+[`mergeTest` polyfill](https://github.com/vitalets/playwright-bdd/blob/main/test/component-tests/steps-polyfill/mergeTests.ts).

test/component-tests/playwright.config.ts

@@ -2,9 +2,13 @@ import { defineConfig } from '@playwright/experimental-ct-react';
 import { defineBddConfig } from 'playwright-bdd';
 
 const testDir = defineBddConfig({
-  importTestFrom: 'steps/fixtures.ts',
+  importTestFrom: process.env.NATIVE_MERGE_TESTS
+    ? 'steps-native/fixtures.js'
+    : 'steps-polyfill/fixtures.ts',
   paths: ['features'],
-  require: ['steps/steps.tsx'],
+  require: process.env.NATIVE_MERGE_TESTS
+    ? ['steps-native/steps.jsx']
+    : ['steps-polyfill/steps.tsx'],
 });
 
 export default defineConfig({

test/component-tests/steps-native/fixtures.js

@@ -0,0 +1,8 @@
+// keep this file as .js because @playwright/test has mergeTest only since 1.39
+import { mergeTests } from '@playwright/test';
+import { test as ctBase } from '@playwright/experimental-ct-react';
+import { test as base } from 'playwright-bdd';
+
+export const test = mergeTests(base, ctBase).extend({
+  world: ({}, use) => use({ clickedTimes: 0 }),
+});

test/component-tests/steps-native/steps.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { expect } from '@playwright/test';
+import { createBdd } from 'playwright-bdd';
+import { test } from './fixtures';
+
+const { Given, When, Then } = createBdd(test);
+
+Given('Mounted input component', async ({ mount }) => {
+  // use <textarea> instead of <input>
+  // see: https://github.com/microsoft/playwright/issues/28566
+  await mount(<textarea data-testid="textField" />);
+});
+
+When('I type {string}', async ({ page }, arg) => {
+  await page.getByTestId('textField').fill(arg);
+});
+
+Then('input field has {string}', async ({ page }, arg) => {
+  await expect(page.getByTestId('textField')).toHaveValue(arg);
+});
+
+Given(
+  'Mounted button with an event handler that record how many times it was pressed',
+  async ({ mount, world }) => {
+    await mount(
+      <button type="button" data-testid="button" onClick={() => (world.clickedTimes += 1)} />,
+    );
+  },
+);
+
+When('I press the button', async ({ page }) => {
+  await page.getByTestId('button').click();
+});
+
+Then('the recorded number of times the button was pressed is {int}', async ({ world }, arg) => {
+  expect(world.clickedTimes).toBe(arg);
+});

test/component-tests/steps/steps.tsx → test/component-tests/steps-polyfill/steps.tsx

@@ -32,6 +32,9 @@ When('I press the button', async ({ page }) => {
   await page.getByTestId('button').click();
 });
 
-Then('the recorded number of times the button was pressed is {int}', async ({ world }, arg) => {
-  expect(world.clickedTimes).toBe(arg);
-});
+Then(
+  'the recorded number of times the button was pressed is {int}',
+  async ({ world }, arg: number) => {
+    expect(world.clickedTimes).toBe(arg);
+  },
+);

test/component-tests/test.mjs

@@ -1,9 +1,13 @@
 import { test, getTestName, execPlaywrightTest, getPackageVersion } from '../helpers.mjs';
 
-// Playwright 1.33 has a strange error
+const pwVersion = getPackageVersion('@playwright/test');
+
+// Playwright 1.33 has a weird error.
 // See: https://github.com/vitalets/playwright-bdd/pull/63#issuecomment-1782832507
-const isPW133 = getPackageVersion('@playwright/test').startsWith('1.33.');
+const skip = pwVersion.startsWith('1.33.');
 
-test(getTestName(import.meta), { skip: isPW133 }, (t) => {
-  execPlaywrightTest(t.name);
+test(getTestName(import.meta), { skip }, (t) => {
+  execPlaywrightTest(t.name, {
+    NATIVE_MERGE_TESTS: pwVersion >= '1.39.0',
+  });
 });