[BUG] in playwright-ct with React, I am forced to use the spread operator when rendering children

[atn832]

System info

• Playwright Version: "@playwright/experimental-ct-react17": "^1.38.1"
• Operating System: macOS 13.4.1
• Browser: All
• Other info: It seems to happen in React 18 as well, although the error message doesn't get displayed.

Source code

• I provided exact source code that allows reproducing the issue locally.

Config file

// playwright-ct.config.ts
import { defineConfig, devices } from '@playwright/experimental-ct-react17';

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir: './',
  // Glob patterns or regular expressions that match test files.
  testMatch: '*.spec.ts[x]',
  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
  snapshotDir: './__snapshots__',
  /* Maximum time one test can run for. */
  timeout: 10 * 1000,
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',

    /* Port to use for Playwright component endpoint. */
    ctPort: 3100,
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

Test file (self-contained)

import { test } from '@playwright/experimental-ct-react17';

test('MyComponent-fails', async ({ mount }) => {
  const children = [<div>hello</div>, 'world'];
  const parent = <div>{ children }</div>;
  console.log(JSON.stringify(parent, null, ' '));
  await mount(parent);
});

test('MyComponent-works', async ({ mount }) => {
  const children = [<div>hello</div>, 'world'];
  // using the spread operator fixes it.
  const parent = <div>{ ...children }</div>;
  console.log(JSON.stringify(parent, null, ' '));
  await mount(parent);
});

Steps

• Run the test

Expected

It should render without an error, and the JSON should be formed properly.

Actual

I get this error:

Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bkind%2C%20type%2C%20props%2C%20children%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
The page states:
Objects are not valid as a React child (found: object with keys {kind, type, props, children}). If you meant to render a collection of children, use an array instead.

Also the JSON does not properly expand the children.

{
 "kind": "jsx",
 "type": "div",
 "props": {},
 "children": [
  [ <== children is a nested array.
   {
    "kind": "jsx",
    "type": "div",
    "props": {},
    "children": [
     "hello"
    ]
   },
   "world"
  ]
 ]
}

If I use the spread operator, it works fine. The issue is, the rest of our project does not use the spread operator to render children, since React then says Spread children are not supported in React..

{
 "kind": "jsx",
 "type": "div",
 "props": {},
 "children": [
  {
   "kind": "jsx",
   "type": "div",
   "props": {},
   "children": [
    "hello"
   ]
  },
  "world"
 ]
}

Is there a workaround or configuration for this? Also I wonder if this is related to #26936.

[dgozman]

cc @sand4rt, just in case you are interested

[atn832]

Thank you so much for fixing this! Looking forward to v1.40