[Bug]: @playwright/experimental-ct-react doesn't mount component about playwright HOT 3 CLOSED

Huh, It works indeed. I was using a dummy component because I wanted to create some tests for a library that I'm implementing, so I had no idea about that.

As a Playwright newcomer, it wasn't intuitive while I was checking the documentation that I needed my components to be in a different file, though. If your team is receiving a PR to improve the documentation, I can maybe add a simple FAQ to clarify the situation, only if this is something that happens frequently and you'll think it's worth it.

In any case, this solves my issue, so I'm going to close this issue. Thanks, @mxschmitt!

from playwright.

Components which you are testing need to be in separate files. Modifying your code as per:

diff --git a/tests/MyComponent.tsx b/tests/MyComponent.tsx
new file mode 100644
index 0000000..aa454a4
--- /dev/null
+++ b/tests/MyComponent.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function MyComponent() {
+    return <p>hi</p>;
+}
\ No newline at end of file
diff --git a/tests/test.spec.tsx b/tests/test.spec.tsx
index 9b6e553..e6b2326 100644
--- a/tests/test.spec.tsx
+++ b/tests/test.spec.tsx
@@ -1,14 +1,10 @@
 import { expect, test } from "@playwright/experimental-ct-react";
-import * as React from "react";
-
-function Page() {
-  return <p>hi</p>;
-}
+import {MyComponent} from './MyComponent'
 
 test.use({ viewport: { width: 500, height: 500 } });
 
 test("do not pass", async ({ mount, page }) => {
-  const component = await mount(<Page />);
+  const component = await mount(<MyComponent />);
 
   await expect(component).toContainText("hi");
 });

makes it work for me. See here on "How it works" under the hood.

from playwright.

If you are interested in making "Under the hood" more clear, feel free to send a PR, happy to review! Not sure if a separate FAQ Entry is needed here.

from playwright.