Playwright渲染接收组件为Props的React组件时出错，求排查原因

React错误#152对应的实际问题是尝试渲染的元素类型无效。具体到你的场景，原因是测试文件中未显式导入React，导致TestSubComponent这个返回JSX的函数组件无法被正确转译，传递给MyComponent的SubComponent不是有效的React组件。

解决方案 #

在测试文件顶部添加React的导入：

import React from 'react';

修改后的完整测试代码：

import React from 'react';
import { expect, test } from '@playwright/experimental-ct-react';
import { MyComponent } from './MyComponent';

const TestSubComponent = () => <p>Hello</p>;

test.describe('My Component', () => {
  test('it should render', async ({ mount, page }) => {
    const component = await mount(
      <MyComponent SubComponent={TestSubComponent} />
    );
    await expect(component).toContainText('Hello');
  });
});

额外排查点 #

• 确认自定义组件命名符合React规范（首字母大写，你的代码已满足）
• 升级@playwright/experimental-ct-react到最新版本，规避旧版本兼容性问题

内容的提问来源于stack exchange，提问作者Hives