Testing async React Server Component using Vitest and React Test Library
Answered
Giant Angora posted this in #help-forum
Giant AngoraOP
Lets say I have a component that looks like this
I am trying to test it like this
When I run the test I get this error
Has anyone had any success doing a test like this?
I am running Next 13.5.4 and react 18
const DashboardFeature = async (): Promise<JSX.Element> => {
const myFakeResult = await new Promise((resolve) => {
setTimeout(() => {
resolve('I am the data');
}, 1000);
});
return <div>{myFakeResult}</div>;
};
export default DashboardFeature;
I am trying to test it like this
import { render, screen } from '@testing-library/react';
import { it, expect } from 'vitest';
import DashboardFeature from './DashboardFeature';
import { Suspense } from 'react';
it('displays default welcome message when feature is disabled', async () => {
render(
<Suspense>
<DashboardFeature />
</Suspense>
);
expect(await screen.findByText('welcome disabled')).toBeInTheDocument();
});
When I run the test I get this error
Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
Has anyone had any success doing a test like this?
I am running Next 13.5.4 and react 18
Answered by Giant Angora
Ok so I got this running. Ended up following the steps here. https://www.marcusoft.net/2022/11/nextjs-testing-async-react-components.html The main part is this
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import HeroPage from "./page";
describe("HeroPage", () => {
it("should render the heading", async () => {
// act
const jsx = await HeroPage({ params: { id: 2 } });
render(jsx);
// assert
const headingElement = screen.getAllByTestId("heading");
expect(headingElement).toHaveTextContent("Luke Skywalker");
});
});
Awaiting your component to get the JSX and then passing that to the react test libaray.1 Reply
Giant AngoraOP
Ok so I got this running. Ended up following the steps here. https://www.marcusoft.net/2022/11/nextjs-testing-async-react-components.html The main part is this
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import HeroPage from "./page";
describe("HeroPage", () => {
it("should render the heading", async () => {
// act
const jsx = await HeroPage({ params: { id: 2 } });
render(jsx);
// assert
const headingElement = screen.getAllByTestId("heading");
expect(headingElement).toHaveTextContent("Luke Skywalker");
});
});
Awaiting your component to get the JSX and then passing that to the react test libaray.Answer