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)

Most upvoted comments

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.