{isClient ? 'client' : 'server'}<\/main>\n+ <\/div>\n+ );\n+ }\n+ if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ Array [\n+ \"Warning: Text content did not match. Server: \\\\\"server\\\\\" Client: \\\\\"client\\\\\"\n+ in main (at **)\n+ in div (at **)\n+ in Mismatch (at **)\",\n+ \"Warning: An error occurred during hydration. The server HTML was replaced with client content in

.\",\n+ \"Caught [Text content does not match server-rendered HTML.]\",\n+ \"Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]\",\n+ ]\n+ `);\n+ } else {\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ Array [\n+ \"Warning: Text content did not match. Server: \\\\\"server\\\\\" Client: \\\\\"client\\\\\"\n+ in main (at **)\n+ in div (at **)\n+ in Mismatch (at **)\",\n+ ]\n+ `);\n+ }\n+ });\n+\n+ \/\/ @gate __DEV__\n+ it('warns when client and server render different html', () => {\n+ function Mismatch({isClient}) {\n+ return (\n+

\n+ client<\/span>'\n+ : 'server<\/span>',\n+ }}\n+ \/>\n+ <\/div>\n+ );\n+ }\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ Array [\n+ \"Warning: Prop \\`dangerouslySetInnerHTML\\` did not match. Server: \\\\\"server<\/span>\\\\\" Client: \\\\\"client<\/span>\\\\\"\n+ in main (at **)\n+ in div (at **)\n+ in Mismatch (at **)\",\n+ ]\n+ `);\n+ });\n+ });\n+\n+ describe('attribute mismatch', () => {\n+ \/\/ @gate __DEV__\n+ it('warns when client and server render different attributes', () => {\n+ function Mismatch({isClient}) {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ Array [\n+ \"Warning: Prop \\`className\\` did not match. Server: \\\\\"child server\\\\\" Client: \\\\\"child client\\\\\"\n+ in main (at **)\n+ in div (at **)\n+ in Mismatch (at **)\",\n+ ]\n+ `);\n+ });\n+\n+ \/\/ @gate __DEV__\n+ it('warns when client renders extra attributes', () => {\n+ function Mismatch({isClient}) {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ Array [\n+ \"Warning: Prop \\`tabIndex\\` did not match. Server: \\\\\"null\\\\\" Client: \\\\\"1\\\\\"\n+ in main (at **)\n+ in div (at **)\n+ in Mismatch (at **)\",\n+ ]\n+ `);\n+ });\n+\n+ \/\/ @gate __DEV__\n+ it('warns when server renders extra attributes', () => {\n+ function Mismatch({isClient}) {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ Array [\n+ \"Warning: Extra attributes from the server: tabindex,dir\n+ in main (at **)\n+ in div (at **)\n+ in Mismatch (at **)\",\n+ ]\n+ `);\n+ });\n+\n+ \/\/ @gate __DEV__\n+ it('warns when both client and server render extra attributes', () => {\n+ function Mismatch({isClient}) {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ Array [\n+ \"Warning: Prop \\`tabIndex\\` did not match. Server: \\\\\"null\\\\\" Client: \\\\\"1\\\\\"\n+ in main (at **)\n+ in div (at **)\n+ in Mismatch (at **)\",\n+ ]\n+ `);\n+ });\n+\n+ \/\/ @gate __DEV__\n+ it('warns when client and server render different styles', () => {\n+ function Mismatch({isClient}) {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ Array [\n+ \"Warning: Prop \\`style\\` did not match. Server: \\\\\"opacity:0\\\\\" Client: \\\\\"opacity:1\\\\\"\n+ in main (at **)\n+ in div (at **)\n+ in Mismatch (at **)\",\n+ ]\n+ `);\n+ });\n+ });\n+\n+ describe('extra nodes on the client', () => {\n+ describe('extra elements on the client', () => {\n+ \/\/ @gate __DEV__\n+ it('warns when client renders an extra element as only child', () => {\n+ function Mismatch({isClient}) {\n+ return (\n+

\n+ {isClient &&

}\n+ <\/div>\n+ );\n+ }\n+ if (\n+ gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)\n+ ) {\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ Array [\n+ \"Warning: Expected server HTML to contain a matching

.\n+ in main (at **)\n+ in div (at **)\n+ in Mismatch (at **)\",\n+ \"Warning: An error occurred during hydration. The server HTML was replaced with client content in

.\",\n+ \"Caught [Hydration failed because the initial UI does not match what was rendered on the server.]\",\n+ \"Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]\",\n+ ]\n+ `);\n+ } else {\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ Array [\n+ \"Warning: Expected server HTML to contain a matching

.\n+ in main (at **)\n+ in div (at **)\n+ in Mismatch (at **)\",\n+ ]\n+ `);\n+ }\n+ });\n+\n+ \/\/ @gate __DEV__\n+ it('warns when client renders an extra element in the beginning', () => {\n+ function Mismatch({isClient}) {\n+ return (\n+

\n+ {isClient &&

}\n+

\n+

dillon1000/react

Files changed