[BUG] Component tests. Cannot compile test if component passed as property

[pashidlos]

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

[klepik1990]

I have the same error, but i don't use component testing

[Hives]

same problem here (see issue mentioned above #18481 )

[Hives]

This issue has been open for a few months. Any idea when there might be a fix? Thanks

[craig-jennings]

I'm getting the same error. This is a pretty big bummer to doing component testing.

Here's a link to my comment in a previous issue about this. It outlines which situations succeed and which ones don't - https://github.com/microsoft/playwright/issues/14401#issuecomment-1169187678

[tedishero]

any update on this? I am forced to stay with 1.22 version due to this issue

[pavelfeldman]

You can only pass primitive values and JSON-alike objects as parameters, see https://playwright.dev/docs/next/test-components#under-the-hood for details. The easiest workaround would be to introduce a component for testing ButtonForTest, that would pass non-trivial objects into your production component.

[tedishero]

I see, I have to move all constants and utility functions out of my tsx files, I will give that a shot first. Thanks alot

[lifeart]

Related issue: https://github.com/microsoft/playwright/issues/16605

[AndyGleed]

Would that known limitation above be the reason why a react component like this won't mount?

export const EnumFilter = (options: { label: string; value: string }[]) => {
    const InnerEnumFilter = <T extends Record<string, unknown>>(props: TableFilterProps<T>) => {
        const { t } = useTranslation();

        // removed some other stuff here

        
    };
    return InnerEnumFilter;
};

In vs code, I get an error stating: 'EnumFilter' cannot be used as a JSX component. Its return type '<T extends Record<string, unknown>>(props: TableFilterProps<T>) => JSX.Element' is not a valid JSX element.

Any help is appreciated.

[dospunk]

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.

[sand4rt]

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 functions as props are possible atm. See callbacks.spec.ts: https://github.com/microsoft/playwright/tree/main/tests/components/ct-react-vite/tests

[drewloomer]

@sand4art that seems to be passing callback functions, but what this issue is describing is JSX via a callback (render prop).

[dospunk]

@sand4rt sorry, I seem to have misunderstood this issue a bit. I'm on Vue where MountOptions.props is typed as a JsonObject which does not allow passing functions

[sand4rt]

@dospunk see comment from earlier: https://github.com/microsoft/playwright/pull/21400#issuecomment-1483142511

[brunosantos55]

Any updates in this issue?

[pavelfeldman]

This should be fixed in 1.42.

[pashidlos]

@pavelfeldman thanks for the fix! I checked it with 1.42.1 and it did work for local component with external component (ex mui icon) I'm getting error

[vite]: Rollup failed to resolve import "undefined" from
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

I'm I doing something wrong or it's still an issue?

Context: "@playwright/experimental-ct-react": "^1.42.1",

Code Snippet https://github.com/pashidlos/pw-component-test-example/tree/component-as-prop

Steps yarn test-ct2