diff --git a/test/fs-router.test.ts b/test/fs-router.test.ts
index 6b927395..24814586 100644
--- a/test/fs-router.test.ts
+++ b/test/fs-router.test.ts
@@ -57,9 +57,18 @@ testDevAndProd("fs-router", ({ createFixture }) => {
);
});
+ const ready = (app: PlaywrightFixture) => app.page.locator('[data-ready]').waitFor({ state: "attached" });;
+
test("hydrates", async ({ page }) => {
let app = new PlaywrightFixture(appFixture, page);
+ app.page.on('console', (e) => {
+ console.log('console', e)
+ });
+ app.page.on('pageerror', (e) => {
+ console.log('pagerror', e)
+ });
await app.goto("/", true);
+ await ready(app);
expect(await app.getHtml("[data-test-id=title]")).toBe(
prettyHtml(`
Vinxi Home
`),
@@ -69,31 +78,26 @@ testDevAndProd("fs-router", ({ createFixture }) => {
);
await app.clickElement("[data-test-id=counter]");
-
- expect(await app.getHtml("[data-test-id=counter]")).toBe(
- prettyHtml(``),
- );
+ expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
await app.clickElement("a[href='/hello']");
await app.waitForURL("/hello");
+ await ready(app);
await new Promise((r) => setTimeout(r, 1000));
expect(await app.getHtml("[data-test-id=title]")).toBe(
prettyHtml(`Hello from Vinxi
`),
);
- expect(await app.getHtml("[data-test-id=counter]")).toBe(
- prettyHtml(``),
- );
+ expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
await app.clickElement("a[href='/']");
await app.waitForURL("/");
+ await ready(app);
await new Promise((r) => setTimeout(r, 2000));
expect(await app.getHtml("[data-test-id=title]")).toBe(
prettyHtml(`Vinxi Home
`),
);
- expect(await app.getHtml("[data-test-id=counter]")).toBe(
- prettyHtml(``),
- );
+ expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
});
});
diff --git a/test/templates/react-ssr-fs/app/app.tsx b/test/templates/react-ssr-fs/app/app.tsx
index 0bf0c666..76c58ce2 100644
--- a/test/templates/react-ssr-fs/app/app.tsx
+++ b/test/templates/react-ssr-fs/app/app.tsx
@@ -1,8 +1,15 @@
-import React from "react";
+import React, { useEffect } from "react";
import { Counter } from "./Counter";
import "./style.css";
+const Ready = () => {
+ useEffect(() => {
+ document.body.dataset.ready = "";
+ });
+ return <>>;
+}
+
export default function App({ assets, children }) {
const [count, setCount] = React.useState(0);
return (
@@ -12,6 +19,7 @@ export default function App({ assets, children }) {
{assets}
+
{children}