rsc-test-helper

import React from "react"; import { render, screen } from "@testing-library/react"; import { patch } from "rsc-test-helper"; // Mocking internal components for a self-contained, runnable example. // In a real application, these would be imported from their respective files. const RoomChatParticipants = async () => { // Simulate an async operation, like data fetching in a Server Component await new Promise(resolve => setTimeout(resolve, 100)); return <div data-testid="chat-participants">Participants List (from RSC)</div>; }; const RoomChatBox = ({ subheading }: { subheading: string }) => ( <div data-testid="chat-box">Chat Box: {subheading}</div> ); const Skeleton = () => <div data-testid="skeleton">Loading participants...</div>; // This component uses an async RSC (RoomChatParticipants) const RoomPage = () => { return ( <div> <section> <RoomChatBox subheading={"Welcome"} /> <React.Suspense fallback={<Skeleton />}> {/* @ts-expect-error Server Component: This is a known Next.js/React pattern when using async RSCs directly in JSX */} <RoomChatParticipants /> </React.Suspense> </section> </div> ); }; describe("Room Page with Async RSCs", () => { it("renders chat box and participants after patching async components", async () => { // Without 'patch', render(<RoomPage />) would throw an error // 'Objects are not valid as a React child (found: [object Promise])'. // 'patch' transforms the async component tree to be synchronously renderable. const ComponentToRender = await patch(<RoomPage />); render(<ComponentToRender />); // Verify synchronous client components are rendered const chatBox = screen.getByTestId("chat-box"); expect(chatBox).toBeInTheDocument(); expect(chatBox).toHaveTextContent("Welcome"); // Verify the async RSC content is rendered after patching const participants = screen.getByTestId("chat-participants"); expect(participants).toBeInTheDocument(); expect(participants).toHaveTextContent("Participants List (from RSC)"); // The skeleton fallback for Suspense is bypassed by 'patch' because promises are awaited. expect(screen.queryByTestId("skeleton")).not.toBeInTheDocument(); }); });