Not imported Vue component does not mount

[pbrzosko]

Please do not submit this issue.

• I understand

[pbrzosko]

Why this doesn't work?

test("should render define component", async ({ mount }) => {
 const component = await mount(
   defineComponent(() => {
     return () => h("div", "Rendered!");
   }),
 );
 await expect(component.getByText("Rendered!")).toBeVisible();
});

[mxschmitt]

Defining them inline is not supported, see here: https://playwright.dev/docs/test-components#under-the-hood

you need to import them before and move them out to a separate file.

[pbrzosko]

OK, but that's a quite functionality loss @mxschmitt. If I want a small test component, that needs to wrap tested component because it needs to provide data the tested component is injecting (provide/inject), then I need to put that in a separate file:

1. I am polluting my source code with small wrapper components only used in tests
2. I can not reuse this wrapper component in other tests, as it is not possible to provide a custom component as a slot [Feature] Component as slot #15900 (comment), so I need to hardcode wrapped component in it

This seems like a common use case to me. For example in React you can imagine Providers being there for tests, so that component can be tested properly.