Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Test layout.tsx file without having validateDOMNesting warning #1250

Closed
mezzouhri opened this issue Nov 15, 2023 · 4 comments · Fixed by #1304
Closed

Test layout.tsx file without having validateDOMNesting warning #1250

mezzouhri opened this issue Nov 15, 2023 · 4 comments · Fixed by #1304

Comments

@mezzouhri
Copy link

Describe the feature you'd like:

As a user of react 18 with NextJS (with app directory), I would like to test routLayout.tsx file without having this warning : Warning: validateDOMNesting(...): <html> cannot appear as a child of <div>. at html at children

//routLayout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="fr" data-testid="rout-layout">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

Suggested implementation:

Maybe by modifying the container options

Thank you so much for your help
@IgorKrupenja IgorKrupenja mentioned this issue Feb 22, 2024
Open
@MatanBobi
Copy link
Member

MatanBobi commented Apr 22, 2024 •
edited
Loading

Based on the types of ReactDOM, I see that the Canary version allows passing Document to createRoot, so this will solve the issue. We should probably update the typing but this is tricky because this is only available in Canary version types. @eps1lon Wdyt about this one?

If you don't mind the TS error, you can workaround this by doing something like this:
https://stackblitz.com/edit/rtl-template-68mwxh?file=src%2FApp.test.tsx

@eps1lon
Copy link
Member

eps1lon commented Apr 22, 2024

This is a React 19 feature. In React 18 you can't render into document, only hydrate.

In React 19, you'd just do render(<App />, { container: document }). In React 18, you'd have to prepare hydrateable HTML first and then do render(<App />, { container: document, hydrate: true }).

All we have to do on the RTL side is ensure we properly type container based on hydrate.

If you don't mind the TS error, you can workaround this by doing something like this:
stackblitz.com/edit/rtl-template-68mwxh?file=src%2FApp.test.tsx

You shouldn't do this in React 18 since that's not supported.

@eps1lon eps1lon mentioned this issue Apr 22, 2024
Merged
@MatanBobi
Copy link
Member

You shouldn't do this in React 18 since that's not supported.

That's why I was using the canary release in my stackblitz, the typing for the canary release support this, isn't that enough?

@eps1lon
Copy link
Member

eps1lon commented Apr 22, 2024

Yeah Canary should be fine. Then all we need is #1304

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Don't raise TypeScript errors when hydating document eps1lon/react-testing-library
3 participants
@eps1lon @MatanBobi @mezzouhri