Context:
- Playwright Version: 1.25.2 (experimental-ct-react)
- Operating System: Ubuntu
- Node.js version: 16.18.0
- Browser: All
I've got a React component which takes another component as a prop, and I'm getting an error when I try to render this in Playwright. Here's a simplified example:
// in MyComponent.jsx
export const MyComponent = ({ SubComponent }) => {
return (
<div>
<SubComponent />
</div>
);
};// in MyComponent.playwright.spec.js
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');
});
});My expectation is that this test should pass as it should render the SubComponent inside MyComponent. But what happens is that it fails with an error:
undefined: Error: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=Component for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
6 | test.describe('My Component', () => {
7 | test('it should render', async ({ mount, page }) => {
> 8 | const component = await mount(
| ^
9 | <MyComponent SubComponent={TestSubComponent} />
10 | );
11 | await expect(component).toContainText('Hello');
The React error is minified so it's hard to tell what's gone wrong.
Is this a bug, or am I doing something wrong?
Context:
I've got a React component which takes another component as a prop, and I'm getting an error when I try to render this in Playwright. Here's a simplified example:
My expectation is that this test should pass as it should render the
SubComponentinsideMyComponent. But what happens is that it fails with an error:The React error is minified so it's hard to tell what's gone wrong.
Is this a bug, or am I doing something wrong?