From d84bdd3dacc4d7d5aed10807a98c75a4552e7412 Mon Sep 17 00:00:00 2001 From: Katja Lutz Date: Tue, 25 Jun 2024 17:00:32 +0200 Subject: [PATCH] fix: wait for hydration via react effect --- test/fs-router.test.ts | 24 ++++++++++++++---------- test/templates/react-ssr-fs/app/app.tsx | 10 +++++++++- 2 files changed, 23 insertions(+), 11 deletions(-) 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} +
App
{children}