Expose method to render whole route tree in testing

[Gpx]

Goals

In the @testing-library repository, we're discussing how to support Next's RSC in React Testing Library. See testing-library/react-testing-library#1209

One thing that would help us is having a method exposed by Next that, given a URL, returns a React component that renders the whole route tree.

For example, given this folder structure:

If I call routeComponent('/dashboard'), I will get back a React component that renders the correct page with its layouts.

Non-Goals

No response

Background

This feature is needed to make testing Next applications with RTL easy. The alternative is for the person writing the tests to define the whole route tree:

render(
  <Layout1 {...fakePropsForLayout1}>
    <Layout2 {...fakePropsForLayout2}>
      <Page {...fakePropsForPage} />
    </Layout2>
  </Layout1>
)

Compare this with:

render(routeComponent('/dashboard'))

The former is harder to write, error-prone, and does not reflect route changes in the tests.

Proposal

I'm not an expert in Next, but I'm happy to help if there's interest on your side.

[nickserv]

I'm also a Testing Library maintainer, and I suggested we request a Next.js API for this. Thanks for starting the discussion @Gpx!

I think the currently suggested name of routeComponent could be confusing as components are usually uppercase and rendered with JSX. A function with a different name, a function component with a prop, or high order component with a curried arg may be easier to understand. However, I'm not sure if we should finalize the API until there's more work done on Testing Library's side, as decisions we're making in testing-library/react-testing-library#1209 could impact usage with Next.js.

Until then, it would still be useful for us to have API feedback from the Next.js team. I'm mostly interested in knowing if this would be easy enough to support in Next.js, and if there are any suggested changes to make it easier to adapt to different renderers and meta frameworks (including other RSC servers) in tests.

[nickserv]

I'm also wondering how Next and test frameworks/libraries should handle loading entire HTML documents. Currently my demo naively renders an entire layout using React Testing Library's render API, but this leads to validateDOMNesting warnings since there are two HTML tags in the document. Should RTL replace the entire document instead? If so, does this affect Next's API design, and will Next support changing routes in tests (though it's not supported in RTL's most popular JSDOM environment)?