fix: wait for hydration via react effect

nksaraf · Jun 27, 2024 · 173663b · 173663b
1 parent 8600f15
commit 173663b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/test/fs-router.test.ts b/test/fs-router.test.ts
@@ -60,6 +60,7 @@ testDevAndProd("fs-router", ({ createFixture }) => {
 	test("hydrates", async ({ page }) => {
 		let app = new PlaywrightFixture(appFixture, page);
 		await app.goto("/", true);
+		await app.page.waitForSelector('[data-ready]')
 
 		expect(await app.getHtml("[data-test-id=title]")).toBe(
 			prettyHtml(`<h1 data-test-id="title">Vinxi Home</h1>`),
@@ -76,6 +77,7 @@ testDevAndProd("fs-router", ({ createFixture }) => {
 
 		await app.clickElement("a[href='/hello']");
 		await app.waitForURL("/hello");
+		await app.page.waitForSelector('[data-ready]');
 		await new Promise((r) => setTimeout(r, 1000));
 
 		expect(await app.getHtml("[data-test-id=title]")).toBe(
@@ -87,6 +89,7 @@ testDevAndProd("fs-router", ({ createFixture }) => {
 
 		await app.clickElement("a[href='/']");
 		await app.waitForURL("/");
+		await app.page.waitForSelector('[data-ready]')
 		await new Promise((r) => setTimeout(r, 2000));
 
 		expect(await app.getHtml("[data-test-id=title]")).toBe(

diff --git a/test/templates/react-ssr-fs/app/app.tsx b/test/templates/react-ssr-fs/app/app.tsx
@@ -1,12 +1,14 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import { Counter } from "./Counter";
 import "./style.css";
 
 export default function App({ assets, children }) {
 	const [count, setCount] = React.useState(0);
+	const [ready, setReady] = React.useState(false);
+	useEffect(() => setReady(true), [])
 	return (
-		<html lang="en">
+		<html lang="en" data-ready={ready}>
 			<head>
 				<link rel="icon" href="/favicon.ico" />
 				{assets}