fix(hydration): don't error if data-allow-mismatch provided for fragment

Author: Alexander Dmitryuk

packages/runtime-core/__tests__/hydration.spec.ts

@@ -668,6 +668,7 @@ describe('SSR hydration', () => {
     )
     expect(teleportContainer.innerHTML).toBe('<span>Teleported Comp1</span>')
     expect(`Hydration children mismatch`).toHaveBeenWarned()
+    expect(`Hydration completed but contains mismatches.`).toHaveBeenErrored()
 
     toggle.value = false
     await nextTick()
@@ -2271,6 +2272,9 @@ describe('SSR hydration', () => {
         '<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>',
       )
       expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+      expect(
+        `Hydration completed but contains mismatches.`,
+      ).not.toHaveBeenErrored()
     })
 
     test('fragment too many children', () => {
@@ -2287,7 +2291,6 @@ describe('SSR hydration', () => {
       // excessive children removal
       expect(`Hydration children mismatch`).not.toHaveBeenWarned()
     })
-
     test('comment mismatch (element)', () => {
       const { container } = mountWithHydration(
         `<div data-allow-mismatch="children"><span></span></div>`,

packages/runtime-core/src/hydration.ts

@@ -56,7 +56,7 @@ export enum DOMNodeTypes {
 
 let hasLoggedMismatchError = false
 const logMismatchError = () => {
-  if (__TEST__ || hasLoggedMismatchError) {
+  if (hasLoggedMismatchError) {
     return
   }
   // this error should show up in production
@@ -657,9 +657,11 @@ export function createHydrationFunctions(
     if (next && isComment(next) && next.data === ']') {
       return nextSibling((vnode.anchor = next))
     } else {
-      // fragment didn't hydrate successfully, since we didn't get a end anchor
-      // back. This should have led to node/children mismatch warnings.
-      logMismatchError()
+      if (!isMismatchAllowed(node.parentElement, 1 /* CHILDREN */)) {
+        // fragment didn't hydrate successfully, since we didn't get a end anchor
+        // back. This should have led to node/children mismatch warnings.
+        logMismatchError()
+      }
 
       // since the anchor is missing, we need to create one and insert it
       insert((vnode.anchor = createComment(`]`)), container, next)

scripts/setup-vitest.ts

@@ -6,6 +6,7 @@ declare module 'vitest' {
 }
 
 interface CustomMatchers<R = unknown> {
+  toHaveBeenErrored(): R
   toHaveBeenWarned(): R
   toHaveBeenWarnedLast(): R
   toHaveBeenWarnedTimes(n: number): R
@@ -14,6 +15,27 @@ interface CustomMatchers<R = unknown> {
 vi.stubGlobal('MathMLElement', class MathMLElement {})
 
 expect.extend({
+  toHaveBeenErrored(received: string) {
+    const passed = error.mock.calls.some(args => args[0].includes(received))
+    if (passed) {
+      asserted.add(received)
+      return {
+        pass: true,
+        message: () => `expected "${received}" not to have been errored.`,
+      }
+    } else {
+      const msgs = error.mock.calls.map(args => args[0]).join('\n - ')
+      return {
+        pass: false,
+        message: () =>
+          `expected "${received}" to have been errored` +
+          (msgs.length
+            ? `.\n\nActual messages:\n\n - ${msgs}`
+            : ` but no error was recorded.`),
+      }
+    }
+  },
+
   toHaveBeenWarned(received: string) {
     const passed = warn.mock.calls.some(args => args[0].includes(received))
     if (passed) {
@@ -79,16 +101,21 @@ expect.extend({
 })
 
 let warn: MockInstance
+let error: MockInstance
 const asserted: Set<string> = new Set()
 
 beforeEach(() => {
   asserted.clear()
   warn = vi.spyOn(console, 'warn')
   warn.mockImplementation(() => {})
+
+  error = vi.spyOn(console, 'error')
+  error.mockImplementation(() => {})
 })
 
 afterEach(() => {
   const assertedArray = Array.from(asserted)
+
   const nonAssertedWarnings = warn.mock.calls
     .map(args => args[0])
     .filter(received => {
@@ -104,4 +131,20 @@ afterEach(() => {
       )}`,
     )
   }
+
+  const nonAssertedErrors = error.mock.calls
+    .map(args => args[0])
+    .filter(received => {
+      return !assertedArray.some(assertedMsg => {
+        return received.includes(assertedMsg)
+      })
+    })
+  error.mockRestore()
+  if (nonAssertedErrors.length) {
+    throw new Error(
+      `test case threw unexpected errors:\n - ${nonAssertedErrors.join(
+        '\n - ',
+      )}`,
+    )
+  }
 })