From 05e8b7a9335416756cdf08f4bcf85b57c9c3607c Mon Sep 17 00:00:00 2001 From: Matheus Cardoso Date: Wed, 13 Nov 2024 09:54:29 -0300 Subject: [PATCH] fix(engine-core): console.warn instead of console.error for hydration mismatches --- .../engine-core/src/framework/hydration.ts | 22 +++++++++--------- .../attributes/falsy-mismatch/index.spec.js | 4 ++-- .../attrs-compatibility/index.spec.js | 2 +- .../mismatches/attrs-expression/index.spec.js | 2 +- .../dynamic-different/index.spec.js | 2 +- .../index.spec.js | 4 ++-- .../index.spec.js | 4 ++-- .../index.spec.js | 2 +- .../index.spec.js | 2 +- .../index.spec.js | 2 +- .../extra-class-from-client/index.spec.js | 2 +- .../extra-class-from-server/index.spec.js | 2 +- .../only-present-in-ssr/index.spec.js | 6 ++--- .../same-different-order/index.spec.js | 4 ++-- .../comment-instead-of-text/index.spec.js | 2 +- .../index.spec.js | 2 +- .../dynamic-component/index.spec.js | 4 ++-- .../element-instead-of-textNode/index.spec.js | 4 ++-- .../attr-mutated-class-mismatch/index.spec.js | 4 ++-- .../class-mutated-attr-mismatch/index.spec.js | 4 ++-- .../foreach/index.spec.js | 2 +- .../if-true/index.spec.js | 23 +++++++++++++------ .../mismatches/sibling-issue/index.spec.js | 2 +- .../computed/different-priority/index.spec.js | 4 ++-- .../computed/extra-from-client/index.spec.js | 2 +- .../computed/extra-from-server/index.spec.js | 4 ++-- .../same-different-order/index.spec.js | 2 +- .../index.spec.js | 2 +- .../index.spec.js | 2 +- .../static/different-priority/index.spec.js | 2 +- .../static/extra-from-client/index.spec.js | 2 +- .../static/extra-from-server/index.spec.js | 2 +- .../static/same-different-order/index.spec.js | 4 ++-- .../text-instead-of-comment/index.spec.js | 2 +- .../textNode-instead-of-element/index.spec.js | 4 ++-- .../no-opt-out/index.spec.js | 4 ++-- .../opt-out-wrong-array/index.spec.js | 4 ++-- .../number-of-child-els/index.spec.js | 4 ++-- 38 files changed, 80 insertions(+), 71 deletions(-) diff --git a/packages/@lwc/engine-core/src/framework/hydration.ts b/packages/@lwc/engine-core/src/framework/hydration.ts index 2e2e57172c..e6acdc0af9 100644 --- a/packages/@lwc/engine-core/src/framework/hydration.ts +++ b/packages/@lwc/engine-core/src/framework/hydration.ts @@ -23,7 +23,7 @@ import { parseStyleText, } from '@lwc/shared'; -import { logError, logWarn } from '../shared/logger'; +import { logWarn } from '../shared/logger'; import { RendererAPI } from './renderer'; import { cloneAndOmitKey, shouldBeFormAssociated } from './utils'; @@ -82,7 +82,7 @@ export function hydrateRoot(vm: VM) { hydrateVM(vm); if (hasMismatch && process.env.NODE_ENV !== 'production') { - logError('Hydration completed with errors.', vm); + logWarn('Hydration completed with errors.', vm); } } @@ -441,7 +441,7 @@ function hydrateChildren( if (process.env.NODE_ENV !== 'production') { if (!hasWarned) { hasWarned = true; - logError( + logWarn( `Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.`, owner ); @@ -473,7 +473,7 @@ function hydrateChildren( hasMismatch = true; if (process.env.NODE_ENV !== 'production') { if (!hasWarned) { - logError( + logWarn( `Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.`, owner ); @@ -518,7 +518,7 @@ function hasCorrectNodeType( const { getProperty } = renderer; if (getProperty(node, 'nodeType') !== nodeType) { if (process.env.NODE_ENV !== 'production') { - logError('Hydration mismatch: incorrect node type received', vnode.owner); + logWarn('Hydration mismatch: incorrect node type received', vnode.owner); } return false; } @@ -535,7 +535,7 @@ function isMatchingElement( const { getProperty } = renderer; if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) { if (process.env.NODE_ENV !== 'production') { - logError( + logWarn( `Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty( elm, 'tagName' @@ -601,7 +601,7 @@ function validateAttrs( if (!attributeValuesAreEqual(attrValue, elmAttrValue)) { if (process.env.NODE_ENV !== 'production') { const { getProperty } = renderer; - logError( + logWarn( `Mismatch hydrating element <${getProperty( elm, 'tagName' @@ -703,7 +703,7 @@ function validateClassAttr( if (!nodesAreCompatible) { if (process.env.NODE_ENV !== 'production') { - logError( + logWarn( `Mismatch hydrating element <${getProperty( elm, 'tagName' @@ -763,7 +763,7 @@ function validateStyleAttr( if (!nodesAreCompatible) { if (process.env.NODE_ENV !== 'production') { const { getProperty } = renderer; - logError( + logWarn( `Mismatch hydrating element <${getProperty( elm, 'tagName' @@ -802,7 +802,7 @@ function areCompatibleStaticNodes(client: Node, ssr: Node, vnode: VStatic, rende let isCompatibleElements = true; if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) { if (process.env.NODE_ENV !== 'production') { - logError( + logWarn( `Hydration mismatch: expecting element with tag "${getProperty( client, 'tagName' @@ -824,7 +824,7 @@ function areCompatibleStaticNodes(client: Node, ssr: Node, vnode: VStatic, rende // partId === 0 will always refer to the root element, this is guaranteed by the compiler. if (parts?.[0].partId !== 0) { if (process.env.NODE_ENV !== 'production') { - logError( + logWarn( `Mismatch hydrating element <${getProperty( client, 'tagName' diff --git a/packages/@lwc/integration-karma/test-hydration/attributes/falsy-mismatch/index.spec.js b/packages/@lwc/integration-karma/test-hydration/attributes/falsy-mismatch/index.spec.js index 3ba4dab046..907611821b 100644 --- a/packages/@lwc/integration-karma/test-hydration/attributes/falsy-mismatch/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/attributes/falsy-mismatch/index.spec.js @@ -29,8 +29,8 @@ export default { } TestUtils.expectConsoleCallsDev(consoleCalls, { - warn: [], - error: [ + error: [], + warn: [ 'Mismatch hydrating element
: attribute "data-foo" has different values, expected "undefined" but found null', 'Mismatch hydrating element
: attribute "data-foo" has different values, expected "null" but found null', 'Hydration completed with errors.', diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-compatibility/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-compatibility/index.spec.js index d5e40420dc..e2e604e187 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-compatibility/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-compatibility/index.spec.js @@ -19,7 +19,7 @@ export default { expect(p.getAttribute('data-another-diff')).toBe('client-val'); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "title" has different values, expected "client-title" but found "ssr-title"', 'Mismatch hydrating element

: attribute "data-another-diff" has different values, expected "client-val" but found "ssr-val"', 'Hydration completed with errors.', diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/index.spec.js index 8bbcb401d3..a87dcaaab4 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/index.spec.js @@ -18,7 +18,7 @@ export default { expect(div.getAttribute('data-static')).toBe('same-value'); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "data-foo" has different values, expected "client" but found "server"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-different/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-different/index.spec.js index 7800112b0f..e9e7b55085 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-different/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-different/index.spec.js @@ -19,7 +19,7 @@ export default { expect(p.className).not.toBe(snapshots.classes); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "class" has different values, expected "c2 c3 c4" but found "c1 c2 c3"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-empty-in-ssr-null-string-in-client/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-empty-in-ssr-null-string-in-client/index.spec.js index a21abcc15f..ce7699cc3c 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-empty-in-ssr-null-string-in-client/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-empty-in-ssr-null-string-in-client/index.spec.js @@ -22,8 +22,8 @@ export default { expect(p.className).not.toBe(snapshots.className); TestUtils.expectConsoleCallsDev(consoleCalls, { - warn: [], - error: [ + error: [], + warn: [ 'Mismatch hydrating element

: attribute "class" has different values, expected "null" but found null', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-null-string-in-ssr-empty-in-client/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-null-string-in-ssr-empty-in-client/index.spec.js index fdf5b0826c..f676816120 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-null-string-in-ssr-empty-in-client/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-null-string-in-ssr-empty-in-client/index.spec.js @@ -22,8 +22,8 @@ export default { expect(p.className).not.toBe(snapshots.className); TestUtils.expectConsoleCallsDev(consoleCalls, { - warn: [], - error: [ + error: [], + warn: [ 'Mismatch hydrating element

: attribute "class" has different values, expected "" but found "null"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-same-different-order-throws/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-same-different-order-throws/index.spec.js index e580fb94e0..238f9bc5ef 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-same-different-order-throws/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/dynamic-same-different-order-throws/index.spec.js @@ -19,7 +19,7 @@ export default { expect(p.className).not.toBe(snapshots.classes); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "class" has different values, expected "c3 c2 c1" but found "c1 c2 c3"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/empty-string-on-client-nonempty-on-server/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/empty-string-on-client-nonempty-on-server/index.spec.js index b3b47011e6..4b47ea36ac 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/empty-string-on-client-nonempty-on-server/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/empty-string-on-client-nonempty-on-server/index.spec.js @@ -18,7 +18,7 @@ export default { expect(p.className).toBe(''); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "class" has different values, expected "" but found "yolo"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/empty-string-on-server-nonempty-on-client/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/empty-string-on-server-nonempty-on-client/index.spec.js index f130d0b893..bd810a8d88 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/empty-string-on-server-nonempty-on-client/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/empty-string-on-server-nonempty-on-client/index.spec.js @@ -18,7 +18,7 @@ export default { expect(p.className).toBe('yolo'); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "class" has different values, expected "yolo" but found null', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-client/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-client/index.spec.js index c80772c979..c7dc09cdd8 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-client/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-client/index.spec.js @@ -20,7 +20,7 @@ export default { expect(p.className).toBe('c1 c2 c3'); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "class" has different values, expected "c1 c2 c3" but found "c1 c3"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-server/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-server/index.spec.js index a3af83a2fb..181bbd1df9 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-server/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-server/index.spec.js @@ -20,7 +20,7 @@ export default { expect(p.className).toBe('c1 c3'); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "class" has different values, expected "c1 c3" but found "c1 c2 c3"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/only-present-in-ssr/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/only-present-in-ssr/index.spec.js index a909824a42..446ea1e152 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/only-present-in-ssr/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/only-present-in-ssr/index.spec.js @@ -12,9 +12,9 @@ export default { const consoleCalls = consoleSpy.calls; TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ - '[LWC error]: Mismatch hydrating element : attribute "class" has different values, expected "" but found "foo"\n', - '[LWC error]: Hydration completed with errors.\n', + warn: [ + '[LWC warn]: Mismatch hydrating element : attribute "class" has different values, expected "" but found "foo"\n', + '[LWC warn]: Hydration completed with errors.\n', ], }); }, diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js index cd816f1759..f66691f97a 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js @@ -20,13 +20,13 @@ export default { expect(p).toBe(snapshots.p); expect(p.className).toBe(snapshots.classes); - expect(consoleCalls.error).toHaveSize(0); + expect(consoleCalls.warn).toHaveSize(0); } else { expect(p).not.toBe(snapshots.p); expect(p.className).toBe('c1 c2 c3'); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "class" has different values, expected "c1 c2 c3" but found "c3 c2 c1"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/comment-instead-of-text/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/comment-instead-of-text/index.spec.js index baa55b06e6..6691d03230 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/comment-instead-of-text/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/comment-instead-of-text/index.spec.js @@ -18,7 +18,7 @@ export default { expect(comment.nodeValue).toBe(snapshots.text.nodeValue); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Hydration mismatch: incorrect node type received', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js index 39ca39e2a0..aa768fcbb7 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js @@ -24,7 +24,7 @@ export default { expect(p.getAttribute('data-attrs')).toBe('client-attrs'); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "data-attrs" has different values, expected "client-attrs" but found "ssr-attrs"', 'Mismatch hydrating element

: attribute "class" has different values, expected "client-class" but found "ssr-class"', 'Mismatch hydrating element

: attribute "style" has different values, expected "background-color: blue;" but found "background-color: red;"', diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/dynamic-component/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/dynamic-component/index.spec.js index 11ba9990cb..bd1622c6b7 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/dynamic-component/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/dynamic-component/index.spec.js @@ -18,8 +18,8 @@ export default { expect(target.shadowRoot.querySelector('x-client')).not.toBeNull(); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ - '[LWC error]: Hydration mismatch: expecting element with tag "x-client" but found "x-server".', + warn: [ + '[LWC warn]: Hydration mismatch: expecting element with tag "x-client" but found "x-server".', 'Hydration completed with errors.', ], }); diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/element-instead-of-textNode/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/element-instead-of-textNode/index.spec.js index 0bed20310e..4084d85039 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/element-instead-of-textNode/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/element-instead-of-textNode/index.spec.js @@ -20,8 +20,8 @@ export default { expect(text.nodeType).toBe(Node.TEXT_NODE); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ - '[LWC error]: Hydration mismatch: incorrect node type received', + warn: [ + '[LWC warn]: Hydration mismatch: incorrect node type received', 'Hydration completed with errors.', ], }); diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr-mutated-class-mismatch/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr-mutated-class-mismatch/index.spec.js index 2bc184ea6b..f412c6526b 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr-mutated-class-mismatch/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr-mutated-class-mismatch/index.spec.js @@ -25,8 +25,8 @@ export default { expect(child.getAttribute('class')).toBe('is-client'); TestUtils.expectConsoleCallsDev(consoleCalls, { - warn: [], - error: [ + error: [], + warn: [ 'Mismatch hydrating element : attribute "class" has different values, expected "is-client" but found "is-server"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class-mutated-attr-mismatch/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class-mutated-attr-mismatch/index.spec.js index 7d7bdbc20e..a2f370c8e8 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class-mutated-attr-mismatch/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class-mutated-attr-mismatch/index.spec.js @@ -24,8 +24,8 @@ export default { expect(child.getAttribute('data-mismatched-attr')).toBe('is-client'); TestUtils.expectConsoleCallsDev(consoleCalls, { - warn: [], - error: [ + error: [], + warn: [ 'Mismatch hydrating element : attribute "data-mismatched-attr" has different values, expected "is-client" but found "is-server"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/invalid-number-of-nodes/foreach/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/invalid-number-of-nodes/foreach/index.spec.js index 831387a2a8..d8d6aa21c7 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/invalid-number-of-nodes/foreach/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/invalid-number-of-nodes/foreach/index.spec.js @@ -16,7 +16,7 @@ export default { expect(hydratedSnapshot.text).not.toBe(snapshots.text); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Server rendered more nodes than the client.', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/invalid-number-of-nodes/if-true/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/invalid-number-of-nodes/if-true/index.spec.js index 2c1a6bab18..4afa0b06d1 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/invalid-number-of-nodes/if-true/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/invalid-number-of-nodes/if-true/index.spec.js @@ -14,12 +14,21 @@ export default { const hydratedSnapshot = this.snapshot(target); expect(hydratedSnapshot.text).not.toBe(snapshots.text); - - TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ - 'Server rendered more nodes than the client.', - 'Hydration completed with errors.', - ], - }); + if (process.env.DISABLE_STATIC_CONTENT_OPTIMIZATION) { + TestUtils.expectConsoleCallsDev(consoleCalls, { + warn: [ + 'Hydration mismatch: text values do not match, will recover from the difference', + 'Server rendered more nodes than the client.', + 'Hydration completed with errors.', + ], + }); + } else { + TestUtils.expectConsoleCallsDev(consoleCalls, { + warn: [ + 'Server rendered more nodes than the client.', + 'Hydration completed with errors.', + ], + }); + } }, }; diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/sibling-issue/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/sibling-issue/index.spec.js index e4527b0768..52a278d35e 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/sibling-issue/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/sibling-issue/index.spec.js @@ -17,7 +17,7 @@ export default { expect(div).toBeDefined(); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/different-priority/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/different-priority/index.spec.js index 72eec11cf4..01ce47fcff 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/different-priority/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/different-priority/index.spec.js @@ -22,8 +22,8 @@ export default { ); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ - '[LWC error]: Mismatch hydrating element

: attribute "style" has different values, expected "background-color: red; border-color: red !important;" but found "background-color: red; border-color: red;"', + warn: [ + '[LWC warn]: Mismatch hydrating element

: attribute "style" has different values, expected "background-color: red; border-color: red !important;" but found "background-color: red; border-color: red;"', 'Hydration completed with errors.', ], }); diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-client/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-client/index.spec.js index eee9cacb9a..b2441ff157 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-client/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-client/index.spec.js @@ -22,7 +22,7 @@ export default { ); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "style" has different values, expected "background-color: red; border-color: red; margin: 1px;" but found "background-color: red; border-color: red;"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-server/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-server/index.spec.js index 3e9449907c..7517ecbc38 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-server/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/extra-from-server/index.spec.js @@ -20,8 +20,8 @@ export default { expect(p.getAttribute('style')).toBe('background-color: red; border-color: red;'); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ - '[LWC error]: Mismatch hydrating element

: attribute "style" has different values, expected "background-color: red; border-color: red;" but found "background-color: red; border-color: red; margin: 1px;"', + warn: [ + '[LWC warn]: Mismatch hydrating element

: attribute "style" has different values, expected "background-color: red; border-color: red;" but found "background-color: red; border-color: red; margin: 1px;"', 'Hydration completed with errors.', ], }); diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/same-different-order/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/same-different-order/index.spec.js index dbfad743ef..709ac9a2c1 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/same-different-order/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/same-different-order/index.spec.js @@ -21,7 +21,7 @@ export default { ); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "style" has different values, expected "margin: 1px; border-color: red; background-color: red;" but found "background-color: red; border-color: red; margin: 1px;"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-client-nonempty-on-server/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-client-nonempty-on-server/index.spec.js index 6e46cc9640..d7454529ab 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-client-nonempty-on-server/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-client-nonempty-on-server/index.spec.js @@ -18,7 +18,7 @@ export default { expect(p.getAttribute('style')).toBe(null); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "style" has different values, expected "" but found "color: burlywood;"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-server-nonempty-on-client/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-server-nonempty-on-client/index.spec.js index ee7d4c88d2..2a01c95b95 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-server-nonempty-on-client/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/empty-string/empty-on-server-nonempty-on-client/index.spec.js @@ -18,7 +18,7 @@ export default { expect(p.getAttribute('style')).toBe('color: burlywood;'); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "style" has different values, expected "color: burlywood;" but found ""', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/different-priority/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/different-priority/index.spec.js index 6932fa5659..15d96c1752 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/different-priority/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/different-priority/index.spec.js @@ -22,7 +22,7 @@ export default { ); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "style" has different values, expected "background-color: red; border-color: red !important;" but found "background-color: red; border-color: red;"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/extra-from-client/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/extra-from-client/index.spec.js index ade71b2048..268d1aca7a 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/extra-from-client/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/extra-from-client/index.spec.js @@ -22,7 +22,7 @@ export default { ); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "style" has different values, expected "background-color: red; border-color: red; margin: 1px;" but found "background-color: red; border-color: red;"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/extra-from-server/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/extra-from-server/index.spec.js index 6aa426d624..e66ccaff08 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/extra-from-server/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/extra-from-server/index.spec.js @@ -20,7 +20,7 @@ export default { expect(p.getAttribute('style')).toBe('background-color: red; border-color: red;'); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "style" has different values, expected "background-color: red; border-color: red;" but found "background-color: red; border-color: red; margin: 1px;"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/same-different-order/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/same-different-order/index.spec.js index a5ba30cb17..c9c7ebc0be 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/same-different-order/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/same-different-order/index.spec.js @@ -20,7 +20,7 @@ export default { expect(p).toBe(snapshots.p); expect(p.getAttribute('style')).toBe(snapshots.style); - expect(consoleCalls.error).toHaveSize(0); + expect(consoleCalls.warn).toHaveSize(0); } else { expect(p).not.toBe(snapshots.p); expect(p.getAttribute('style')).toBe( @@ -28,7 +28,7 @@ export default { ); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Mismatch hydrating element

: attribute "style" has different values, expected "margin: 1px; border-color: red; background-color: red;" but found "background-color: red; border-color: red; margin: 1px;"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/text-instead-of-comment/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/text-instead-of-comment/index.spec.js index c8b044f4b1..a8b87c7ee3 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/text-instead-of-comment/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/text-instead-of-comment/index.spec.js @@ -18,7 +18,7 @@ export default { expect(text.nodeValue).toBe(snapshots.comment.nodeValue); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ + warn: [ 'Hydration mismatch: incorrect node type received', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/textNode-instead-of-element/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/textNode-instead-of-element/index.spec.js index c7eb6a8dae..4a93aa13fb 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/textNode-instead-of-element/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/textNode-instead-of-element/index.spec.js @@ -20,8 +20,8 @@ export default { expect(text.nodeType).toBe(Node.ELEMENT_NODE); TestUtils.expectConsoleCallsDev(consoleCalls, { - error: [ - '[LWC error]: Hydration mismatch: incorrect node type received', + warn: [ + '[LWC warn]: Hydration mismatch: incorrect node type received', 'Hydration completed with errors.', ], }); diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/no-opt-out/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/no-opt-out/index.spec.js index da6b81a6b7..f1aa41edeb 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/no-opt-out/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/no-opt-out/index.spec.js @@ -9,8 +9,8 @@ export default { expect(hydratedSnapshot.child).not.toBe(snapshots.child); TestUtils.expectConsoleCallsDev(consoleCalls, { - warn: [], - error: [ + error: [], + warn: [ 'Mismatch hydrating element : attribute "data-mutate-during-render" has different values, expected "false" but found "true"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/opt-out-wrong-array/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/opt-out-wrong-array/index.spec.js index da6b81a6b7..f1aa41edeb 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/opt-out-wrong-array/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/mutate-in-connected-and-render/opt-out-wrong-array/index.spec.js @@ -9,8 +9,8 @@ export default { expect(hydratedSnapshot.child).not.toBe(snapshots.child); TestUtils.expectConsoleCallsDev(consoleCalls, { - warn: [], - error: [ + error: [], + warn: [ 'Mismatch hydrating element : attribute "data-mutate-during-render" has different values, expected "false" but found "true"', 'Hydration completed with errors.', ], diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/number-of-child-els/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/number-of-child-els/index.spec.js index 3a7991bbd9..a9cebd0704 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/number-of-child-els/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/number-of-child-els/index.spec.js @@ -15,8 +15,8 @@ export default { expect(hydratedSnapshot.childMarkup).not.toBe(snapshots.childMarkup); TestUtils.expectConsoleCallsDev(consoleCalls, { - warn: [], - error: [ + error: [], + warn: [ 'Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.', 'Hydration completed with errors.', ],