fix use cache flaky test (#849)

Author: conico974

examples/experimental/src/app/use-cache/ssr/page.tsx

@@ -1,4 +1,8 @@
-import { FullyCachedComponent, ISRComponent } from "@/components/cached";
+import {
+  FullyCachedComponent,
+  FullyCachedComponentWithTag,
+  ISRComponent,
+} from "@/components/cached";
 import { headers } from "next/headers";
 import { Suspense } from "react";
 
@@ -12,6 +16,9 @@ export default async function Page() {
       <Suspense fallback={<p>Loading...</p>}>
         <FullyCachedComponent />
       </Suspense>
+      <Suspense fallback={<p>Loading...</p>}>
+        <FullyCachedComponentWithTag />
+      </Suspense>
       <Suspense fallback={<p>Loading...</p>}>
         <ISRComponent />
       </Suspense>

examples/experimental/src/components/cached.tsx

@@ -1,11 +1,20 @@
 import { unstable_cacheLife, unstable_cacheTag } from "next/cache";
 
 export async function FullyCachedComponent() {
+  "use cache";
+  return (
+    <div>
+      <p data-testid="fully-cached">{Date.now()}</p>
+    </div>
+  );
+}
+
+export async function FullyCachedComponentWithTag() {
   "use cache";
   unstable_cacheTag("fullyTagged");
   return (
     <div>
-      <p data-testid="fullyCached">{Date.now()}</p>
+      <p data-testid="fully-cached-with-tag">{Date.now()}</p>
     </div>
   );
 }

packages/tests-e2e/tests/experimental/use-cache.test.ts

@@ -3,7 +3,7 @@ import { expect, test } from "@playwright/test";
 test.describe("Composable Cache", () => {
   test("cached component should work in ssr", async ({ page }) => {
     await page.goto("/use-cache/ssr");
-    let fullyCachedElt = page.getByTestId("fullyCached");
+    let fullyCachedElt = page.getByTestId("fully-cached");
     let isrElt = page.getByTestId("isr");
     await expect(fullyCachedElt).toBeVisible();
     await expect(isrElt).toBeVisible();
@@ -15,7 +15,7 @@ test.describe("Composable Cache", () => {
 
     do {
       await page.reload();
-      fullyCachedElt = page.getByTestId("fullyCached");
+      fullyCachedElt = page.getByTestId("fully-cached");
       isrElt = page.getByTestId("isr");
       await expect(fullyCachedElt).toBeVisible();
       await expect(isrElt).toBeVisible();
@@ -31,7 +31,7 @@ test.describe("Composable Cache", () => {
     request,
   }) => {
     await page.goto("/use-cache/ssr");
-    const fullyCachedElt = page.getByTestId("fullyCached");
+    const fullyCachedElt = page.getByTestId("fully-cached-with-tag");
     await expect(fullyCachedElt).toBeVisible();
 
     const initialFullyCachedText = await fullyCachedElt.textContent();
@@ -49,7 +49,7 @@ test.describe("Composable Cache", () => {
   test("cached component should work in isr", async ({ page }) => {
     await page.goto("/use-cache/isr");
 
-    let fullyCachedElt = page.getByTestId("fullyCached");
+    let fullyCachedElt = page.getByTestId("fully-cached");
     let isrElt = page.getByTestId("isr");
 
     await expect(fullyCachedElt).toBeVisible();
@@ -65,7 +65,7 @@ test.describe("Composable Cache", () => {
     while (isrText === initialIsrText) {
       await page.reload();
       isrElt = page.getByTestId("isr");
-      fullyCachedElt = page.getByTestId("fullyCached");
+      fullyCachedElt = page.getByTestId("fully-cached");
       await expect(isrElt).toBeVisible();
       isrText = await isrElt.textContent();
       await expect(fullyCachedElt).toBeVisible();
@@ -76,7 +76,7 @@ test.describe("Composable Cache", () => {
 
     do {
       await page.reload();
-      fullyCachedElt = page.getByTestId("fullyCached");
+      fullyCachedElt = page.getByTestId("fully-cached");
       isrElt = page.getByTestId("isr");
       await expect(fullyCachedElt).toBeVisible();
       await expect(isrElt).toBeVisible();