playwright: [BUG] Component tests. Cannot compile test if component passed as property
Context: “@playwright/experimental-ct-react”: “^1.22.2”,
Code Snippet https://github.com/pashidlos/pw-component-test-example/tree/component-as-prop
Describe the bug
Getting error trying to pass icon as property in component
Locally made icons are throwing different error than the ones from external libraries (ex @mui/icons-material)
Local icon error
yarn test-ct1
Running 0 test using 0 worker
/pw-component-test-example/src/DisableIcon.tsx:14
const DisableIconOriginal = (0, _material.createSvgIcon)(<>
^
SyntaxError: Unexpected token '<'
at wrapSafe (internal/modules/cjs/loader.js:984:16)
at Module._compile (internal/modules/cjs/loader.js:1032:27)
at Module.A._compile (/Users/pstrunkin/work/pw-component-test-example/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:994)
at Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Object.t.<computed>.tu._extensions.<computed> [as .tsx] (/Users/pstrunkin/work/pw-component-test-example/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:1010)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
at Module.require (internal/modules/cjs/loader.js:957:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (/Users/pstrunkin/work/pw-component-test-example/src/TestComponent.pw-spec.tsx:3:1)
at Module._compile (internal/modules/cjs/loader.js:1068:30)
at Module.A._compile (/Users/pstrunkin/work/pw-component-test-example/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:994)
at Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Object.t.<computed>.tu._extensions.<computed> [as .tsx] (/Users/pstrunkin/work/pw-component-test-example/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:1010)
at Module.load (internal/modules/cjs/loader.js:933:32)
=================
no tests found.
External icon error
yarn test-ct2
Running 3 tests using 3 workers
1) [webkit] › src/TestComponent2.pw-spec.tsx:6:1 › should work external icon =====================
undefined: Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
5 |
6 | test("should work external icon", async ({ mount }) => {
> 7 | const component = await mount(<TestComponent icon={AccountTreeIcon} />);
| ^
8 |
9 | await expect(component).toContainText("Test");
10 | });
at /Users/pstrunkin/work/pw-component-test-example/src/TestComponent2.pw-spec.tsx:7:27
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 9
- Comments: 17 (2 by maintainers)
This issue has been open for a few months. Any idea when there might be a fix? Thanks
Any updates on this? I would love to be able to use Playwright but not being able to test any components that take functions as props without creating a whole extra component every time is a complete non-starter.
@dospunk see comment from earlier: https://github.com/microsoft/playwright/pull/21400#issuecomment-1483142511