Let's create an asynchronous server component test now that we have tests for a synchronous RSC and a client component.
We'll be making a fetch to the PokéAPI in our example RSC, co-locating a test file where we await a call to the component, then find the Pokémon we're looking for with findByText.
Disclaimer: The pattern we use for testing the component asynchronously in this video isn't ideal. An alternative would be to use a Suspense instead but that comes with its own problems. So, this is unfortunately the most straightforward method as of now.
Hopefully this changes in the near future! When it does I'll update this video.
Transcript
Picking up where we left off, we have a test for a React server component that is not asynchronous. We've got a client component test. Now let's go and create a test for a page that is asynchronous. So to do that, I'm gonna create a new page, a Pokemon page. And into that, I'm gonna create a page that simply just goes and gets a list of Pokemon and then renders the result.
Now let's see if that actually works. To do that, I go to the slash Pokemon route. And yep, we can see that we have a list of Pokemon, including Bulbasaur, which is what we're going to check for. Now to test this page, again, we're going to create a co-located test in the Pokemon directory. We're going to use exactly the same infrastructure we did before with expect and test and render and screen we're gonna bring in our RSC async component and then instead of rendering the component using JSX which would do a react create element and officially render the component we are essentially going to just await the page function.
Now this is not ideal this is not the way that you would normally render this component. There are options for doing it inside of as a suspense, but it's a lot of configuration to change around and it can also impact other non- async RSC tests. So this is actually the most straightforward way today to test your async RSC. So we're gonna await the page, it's actually gonna run that fetch, and then we're going to look to see if we get the Bulbasaur text coming out the other side. So let's try this.
And we get three tests passed. That means that the test is actually running. We ran the async RSC and we saw that Balbasor came out the other end. Now, of course, the landscape of the React Server Component ecosystem is changing, and I'm absolutely sure that over time we're going to get better, more official ways to test async React Server Components. When that changes, I will update this video and we'll have a fully official version of the React Server Component Async version testing with vitest.
Picking up where we left off, we have a test for a React server component that is not asynchronous. We've got a client component test. Now let's go and create a test for a page that is asynchronous. So to do that, I'm gonna create a new page, a Pokemon page. And into that, I'm gonna create a page that simply just goes and gets a list of Pokemon and then renders the result.
Now let's see if that actually works. To do that, I go to the slash Pokemon route. And yep, we can see that we have a list of Pokemon, including Bulbasaur, which is what we're going to check for. Now to test this page, again, we're going to create a co-located test in the Pokemon directory. We're going to use exactly the same infrastructure we did before with expect and test and render and screen we're gonna bring in our RSC async component and then instead of rendering the component using JSX which would do a react create element and officially render the component we are essentially going to just await the page function.
Now this is not ideal this is not the way that you would normally render this component. There are options for doing it inside of as a suspense, but it's a lot of configuration to change around and it can also impact other non- async RSC tests. So this is actually the most straightforward way today to test your async RSC. So we're gonna await the page, it's actually gonna run that fetch, and then we're going to look to see if we get the Bulbasaur text coming out the other side. So let's try this.
And we get three tests passed. That means that the test is actually running. We ran the async RSC and we saw that Balbasor came out the other end. Now, of course, the landscape of the React Server Component ecosystem is changing, and I'm absolutely sure that over time we're going to get better, more official ways to test async React Server Components. When that changes, I will update this video and we'll have a fully official version of the React Server Component Async version testing with vitest.
Jack Herrington