diff --git a/.github/workflows/karma.yml b/.github/workflows/karma.yml index 6bc1cbf50b..964baa4866 100644 --- a/.github/workflows/karma.yml +++ b/.github/workflows/karma.yml @@ -179,6 +179,7 @@ jobs: - run: NODE_ENV_FOR_TEST=production DISABLE_SYNTHETIC=1 yarn sauce:ci - run: yarn hydration:sauce:ci - run: ENABLE_SYNTHETIC_SHADOW_IN_HYDRATION=1 yarn hydration:sauce:ci + - run: NODE_ENV_FOR_TEST=production yarn hydration:sauce:ci - name: Upload coverage results uses: actions/upload-artifact@v4 diff --git a/packages/@lwc/integration-karma/.eslintrc b/packages/@lwc/integration-karma/.eslintrc index 1fdfbc9dd9..82e3f9b100 100644 --- a/packages/@lwc/integration-karma/.eslintrc +++ b/packages/@lwc/integration-karma/.eslintrc @@ -2,7 +2,8 @@ "globals": { "process": true, "LWC": true, - "spyOnAllFunctions": true + "spyOnAllFunctions": true, + "TestUtils": true }, "env": { diff --git a/packages/@lwc/integration-karma/helpers/test-utils.js b/packages/@lwc/integration-karma/helpers/test-utils.js index 754eaf6837..26d3891a7c 100644 --- a/packages/@lwc/integration-karma/helpers/test-utils.js +++ b/packages/@lwc/integration-karma/helpers/test-utils.js @@ -565,6 +565,34 @@ window.TestUtils = (function (lwc, jasmine, beforeAll) { const IS_SYNTHETIC_SHADOW_LOADED = !`${ShadowRoot}`.includes('[native code]'); + // Designed for hydration tests, this helper asserts certain error/warn console messages were logged + function createExpectConsoleCallsFunc(devOnly) { + return (consoleCalls, methods) => { + for (const [method, matchers] of Object.entries(methods)) { + const calls = consoleCalls[method]; + if (devOnly && process.env.NODE_ENV === 'production') { + // assume no console errors/warnings in production + expect(calls).toHaveSize(0); + } else { + expect(calls).toHaveSize(matchers.length); + for (let i = 0; i < matchers.length; i++) { + const matcher = matchers[i]; + const call = calls[i][0]; + const message = typeof call === 'string' ? call : call.message; + if (typeof matcher === 'string') { + expect(message).toContain(matcher); + } else { + expect(message).toMatch(matcher); + } + } + } + } + }; + } + + const expectConsoleCalls = createExpectConsoleCallsFunc(false); + const expectConsoleCallsDev = createExpectConsoleCallsFunc(true); + // These values are based on the API versions in @lwc/shared/api-version const apiFeatures = { LOWERCASE_SCOPE_TOKENS: process.env.API_VERSION >= 59, @@ -604,6 +632,8 @@ window.TestUtils = (function (lwc, jasmine, beforeAll) { attachReportingControlDispatcher, detachReportingControlDispatcher, IS_SYNTHETIC_SHADOW_LOADED, + expectConsoleCalls, + expectConsoleCallsDev, ...apiFeatures, }; })(LWC, jasmine, beforeAll); diff --git a/packages/@lwc/integration-karma/scripts/karma-configs/hydration/base.js b/packages/@lwc/integration-karma/scripts/karma-configs/hydration/base.js index 3cef145d92..e63030a645 100644 --- a/packages/@lwc/integration-karma/scripts/karma-configs/hydration/base.js +++ b/packages/@lwc/integration-karma/scripts/karma-configs/hydration/base.js @@ -14,7 +14,7 @@ const { ENABLE_SYNTHETIC_SHADOW_IN_HYDRATION } = require('../../shared/options') const karmaPluginHydrationTests = require('../../karma-plugins/hydration-tests'); const karmaPluginEnv = require('../../karma-plugins/env'); const karmaPluginTransformFramework = require('../../karma-plugins/transform-framework.js'); -const { GREP, COVERAGE } = require('../../shared/options'); +const { GREP, COVERAGE, COVERAGE_DIR_FOR_OPTIONS } = require('../../shared/options'); const { createPattern } = require('../utils'); const BASE_DIR = path.resolve(__dirname, '../../../test-hydration'); @@ -98,7 +98,7 @@ module.exports = (config) => { config.plugins.push('karma-coverage'); config.coverageReporter = { - dir: path.resolve(COVERAGE_DIR, 'hydration'), + dir: path.resolve(COVERAGE_DIR, 'hydration', COVERAGE_DIR_FOR_OPTIONS), reporters: [{ type: 'html' }, { type: 'json' }], }; } 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 db0caf27d1..3ba4dab046 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 @@ -28,14 +28,13 @@ export default { expect(divs[i].getAttribute('data-foo')).toEqual(expectedAttrValues[i]); } - expect(consoleCalls.warn).toHaveSize(0); - expect(consoleCalls.error).toHaveSize(3); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element
: attribute "data-foo" has different values, expected "undefined" but found null' - ); - expect(consoleCalls.error[1][0].message).toContain( - 'Mismatch hydrating element
: attribute "data-foo" has different values, expected "null" but found null' - ); - expect(consoleCalls.error[2][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + warn: [], + error: [ + '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/errors/already-hydrated/index.spec.js b/packages/@lwc/integration-karma/test-hydration/errors/already-hydrated/index.spec.js index 259ac5d92b..251c761b6e 100644 --- a/packages/@lwc/integration-karma/test-hydration/errors/already-hydrated/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/errors/already-hydrated/index.spec.js @@ -5,8 +5,9 @@ export default { hydrateComponent(target, Component, {}); const consoleCalls = consoleSpy.calls; - const expectedMessage = '"hydrateComponent" expects an element that is not hydrated.'; - expect(consoleCalls.warn).toHaveSize(1); - expect(consoleCalls.warn[0][0]).toContain(expectedMessage); + + TestUtils.expectConsoleCalls(consoleCalls, { + warn: ['"hydrateComponent" expects an element that is not hydrated.'], + }); }, }; 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 8769b88495..d5e40420dc 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 @@ -18,13 +18,12 @@ export default { expect(p.getAttribute('data-same')).toBe('same-value'); expect(p.getAttribute('data-another-diff')).toBe('client-val'); - expect(consoleCalls.error).toHaveSize(3); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element

: attribute "title" has different values, expected "client-title" but found "ssr-title"' - ); - expect(consoleCalls.error[1][0].message).toContain( - 'Mismatch hydrating element

: attribute "data-another-diff" has different values, expected "client-val" but found "ssr-val"' - ); - expect(consoleCalls.error[2][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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 6a984ac720..8bbcb401d3 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 @@ -17,10 +17,11 @@ export default { expect(div.getAttribute('data-foo')).toBe('client'); expect(div.getAttribute('data-static')).toBe('same-value'); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element

: attribute "data-foo" has different values, expected "client" but found "server"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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 92baf211cc..7800112b0f 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 @@ -18,10 +18,11 @@ export default { expect(p).not.toBe(snapshots.p); expect(p.className).not.toBe(snapshots.classes); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element

: attribute "class" has different values, expected "c2 c3 c4" but found "c1 c2 c3"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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 1e33b158d2..a21abcc15f 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 @@ -21,11 +21,12 @@ export default { expect(p).not.toBe(snapshots.p); expect(p.className).not.toBe(snapshots.className); - expect(consoleCalls.warn).toHaveSize(0); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element

: attribute "class" has different values, expected "null" but found null' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + warn: [], + error: [ + '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 54ec9fbd1e..fdf5b0826c 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 @@ -21,11 +21,12 @@ export default { expect(p).not.toBe(snapshots.p); expect(p.className).not.toBe(snapshots.className); - expect(consoleCalls.warn).toHaveSize(0); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element

: attribute "class" has different values, expected "" but found "null"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + warn: [], + error: [ + '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 675859cf89..e580fb94e0 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 @@ -18,10 +18,11 @@ export default { expect(p).not.toBe(snapshots.p); expect(p.className).not.toBe(snapshots.classes); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element

: attribute "class" has different values, expected "c3 c2 c1" but found "c1 c2 c3"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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/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 2c5193ab6e..a909824a42 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 @@ -10,12 +10,12 @@ export default { hydrateComponent(target, Component, {}); - expect(consoleSpy.calls.error).toHaveSize(2); - expect(consoleSpy.calls.error[0][0].message).toEqual( - '[LWC error]: Mismatch hydrating element : attribute "class" has different values, expected "" but found "foo"\n' - ); - expect(consoleSpy.calls.error[1][0].message).toEqual( - '[LWC error]: Hydration completed with errors.\n' - ); + 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', + ], + }); }, }; diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-client/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-client/index.spec.js index 7d402ce479..c80772c979 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-client/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-client/index.spec.js @@ -19,10 +19,11 @@ export default { expect(p.className).not.toBe(snapshots.classes); expect(p.className).toBe('c1 c2 c3'); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element

: attribute "class" has different values, expected "c1 c2 c3" but found "c1 c3"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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/static-extra-class-from-server/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-server/index.spec.js index e1a127bde5..a3af83a2fb 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-server/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-server/index.spec.js @@ -19,10 +19,11 @@ export default { expect(p.className).not.toBe(snapshots.classes); expect(p.className).toBe('c1 c3'); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element

: attribute "class" has different values, expected "c1 c3" but found "c1 c2 c3"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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/static-same-different-order/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/index.spec.js index 2012217d9a..af8d4d8f1b 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/index.spec.js @@ -18,10 +18,11 @@ export default { expect(p).not.toBe(snapshots.p); expect(p.className).toBe('c1 c2 c3'); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element

: attribute "class" has different values, expected "c1 c2 c3" but found "c3 c2 c1"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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/class-attr/static-unoptimized-extra-class-from-client/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-client/index.spec.js index 7d402ce479..c80772c979 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-client/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-client/index.spec.js @@ -19,10 +19,11 @@ export default { expect(p.className).not.toBe(snapshots.classes); expect(p.className).toBe('c1 c2 c3'); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element

: attribute "class" has different values, expected "c1 c2 c3" but found "c1 c3"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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/static-unoptimized-extra-class-from-server/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-server/index.spec.js index e1a127bde5..a3af83a2fb 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-server/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-server/index.spec.js @@ -19,10 +19,11 @@ export default { expect(p.className).not.toBe(snapshots.classes); expect(p.className).toBe('c1 c3'); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element

: attribute "class" has different values, expected "c1 c3" but found "c1 c2 c3"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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/comment-instead-of-text/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/comment-instead-of-text/index.spec.js index 5e6fd74991..baa55b06e6 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 @@ -17,10 +17,11 @@ export default { expect(comment.nodeType).toBe(Node.COMMENT_NODE); expect(comment.nodeValue).toBe(snapshots.text.nodeValue); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Hydration mismatch: incorrect node type received' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + 'Hydration mismatch: incorrect node type received', + 'Hydration completed with errors.', + ], + }); }, }; diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/different-lwc-inner-html/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/different-lwc-inner-html/index.spec.js index 07140c3d4f..a6cda549a6 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/different-lwc-inner-html/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/different-lwc-inner-html/index.spec.js @@ -21,10 +21,11 @@ export default { expect(p).not.toBe(snapshot.p); expect(p.textContent).toBe('different-content'); - expect(consoleCalls.warn).toHaveSize(1); - expect(consoleCalls.warn[0][0].message).toContain( - 'Mismatch hydrating element

: innerHTML values do not match for element, will recover from the difference' - ); + TestUtils.expectConsoleCallsDev(consoleCalls, { + warn: [ + 'Mismatch hydrating element
: innerHTML values do not match for element, will recover from the difference', + ], + }); target.content = '

another-content

'; 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 e09acc5064..3f79f48ef4 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 @@ -23,16 +23,13 @@ export default { expect(p.getAttribute('style')).toBe('background-color: blue;'); expect(p.getAttribute('data-attrs')).toBe('client-attrs'); - expect(consoleCalls.error).toHaveSize(4); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element

: attribute "data-attrs" has different values, expected "client-attrs" but found "ssr-attrs"' - ); - expect(consoleCalls.error[1][0].message).toContain( - 'Mismatch hydrating element

: attribute "style" has different values, expected "background-color: blue;" but found "background-color: red;"' - ); - expect(consoleCalls.error[2][0].message).toContain( - 'Mismatch hydrating element

: attribute "class" has different values, expected "client-class" but found "ssr-class"' - ); - expect(consoleCalls.error[3][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + 'Mismatch hydrating element

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

: attribute "style" has different values, expected "background-color: blue;" but found "background-color: red;"', + 'Mismatch hydrating element

: attribute "class" has different values, expected "client-class" but found "ssr-class"', + 'Hydration completed with errors.', + ], + }); }, }; 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 7715eb59ff..11ba9990cb 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 @@ -16,10 +16,12 @@ export default { expect(snapshots.tagName).toBe('x-server'); // Client side constructor expect(target.shadowRoot.querySelector('x-client')).not.toBeNull(); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - '[LWC error]: Hydration mismatch: expecting element with tag "x-client" but found "x-server".' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '[LWC error]: 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 7f3db65b28..0bed20310e 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 @@ -19,10 +19,11 @@ export default { expect(text.nodeType).toBe(Node.TEXT_NODE); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - '[LWC error]: Hydration mismatch: incorrect node type received' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '[LWC error]: Hydration mismatch: incorrect node type received', + 'Hydration completed with errors.', + ], + }); }, }; diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/favors-client-side-comment/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/favors-client-side-comment/index.spec.js index c960844ec9..d2ad2997b0 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/favors-client-side-comment/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/favors-client-side-comment/index.spec.js @@ -18,9 +18,10 @@ export default { expect(comment.nodeValue).not.toBe(snapshots.commentText); expect(comment.nodeValue).toBe('second'); - expect(consoleCalls.warn).toHaveSize(1); - expect(consoleCalls.warn[0][0].message).toContain( - 'Hydration mismatch: comment values do not match, will recover from the difference' - ); + TestUtils.expectConsoleCallsDev(consoleCalls, { + warn: [ + 'Hydration mismatch: comment values do not match, will recover from the difference', + ], + }); }, }; diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/favors-client-side-text/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/favors-client-side-text/index.spec.js index a07e1fed79..932f2e69ed 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/favors-client-side-text/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/favors-client-side-text/index.spec.js @@ -18,9 +18,10 @@ export default { expect(p.firstChild).toBe(snapshots.text); expect(p.textContent).toBe('bye!'); - expect(consoleCalls.warn).toHaveSize(1); - expect(consoleCalls.warn[0][0].message).toContain( - 'Hydration mismatch: text values do not match, will recover from the difference' - ); + TestUtils.expectConsoleCallsDev(consoleCalls, { + warn: [ + 'Hydration mismatch: text values do not match, will recover from the difference', + ], + }); }, }; 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 383caf205d..831387a2a8 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 @@ -15,10 +15,11 @@ export default { expect(hydratedSnapshot.text).not.toBe(snapshots.text); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Server rendered more nodes than the client.' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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 b479499df8..2c1a6bab18 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 @@ -15,10 +15,11 @@ export default { expect(hydratedSnapshot.text).not.toBe(snapshots.text); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Server rendered more nodes than the client.' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + 'Server rendered more nodes than the client.', + '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 195caa61ac..72eec11cf4 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 @@ -21,10 +21,11 @@ export default { 'background-color: red; border-color: red !important;' ); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - '[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;"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + 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;"', + '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 1a185fdd1c..eee9cacb9a 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 @@ -21,10 +21,11 @@ export default { 'background-color: red; border-color: red; margin: 1px;' ); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - '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;"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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 ce0cb340a6..3e9449907c 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 @@ -19,10 +19,11 @@ export default { expect(p.getAttribute('style')).not.toBe(snapshots.style); expect(p.getAttribute('style')).toBe('background-color: red; border-color: red;'); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - '[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;"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + 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;"', + '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 4032ddf86a..dbfad743ef 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 @@ -20,10 +20,11 @@ export default { 'margin: 1px; border-color: red; background-color: red;' ); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - '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;"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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/static/different-priority/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/different-priority/index.spec.js index 52ff741e80..6932fa5659 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 @@ -21,10 +21,11 @@ export default { 'background-color: red; border-color: red !important;' ); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element

: attribute "style" has different values, expected "background-color: red; border-color: red !important;" but found "background-color: red; border-color: red;"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + 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;"', + '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 a84a8f3ca7..ade71b2048 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 @@ -21,10 +21,11 @@ export default { 'background-color: red; border-color: red; margin: 1px;' ); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - '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;"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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 5a2535eb47..6aa426d624 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 @@ -19,10 +19,11 @@ export default { expect(p.getAttribute('style')).not.toBe(snapshots.style); expect(p.getAttribute('style')).toBe('background-color: red; border-color: red;'); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - '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;"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + 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;"', + '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 679a0a7468..a52b033c1c 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,10 +20,11 @@ export default { 'margin: 1px; border-color: red; background-color: red;' ); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - '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;"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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/static/unoptimized-different-priority/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-different-priority/index.spec.js index 8be04b2c39..07b19edf44 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-different-priority/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-different-priority/index.spec.js @@ -21,10 +21,11 @@ export default { 'background-color: red; border-color: red !important;' ); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - '[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"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + 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"', + 'Hydration completed with errors.', + ], + }); }, }; diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-client/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-client/index.spec.js index cd7b26d0f8..3686e3640e 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-client/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-client/index.spec.js @@ -21,10 +21,11 @@ export default { 'background-color: red; border-color: red; margin: 1px;' ); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - '[LWC error]: 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"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '[LWC error]: 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/unoptimized-extra-from-server/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-server/index.spec.js index bb2d95b84f..7ed546c1d6 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-server/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-server/index.spec.js @@ -19,10 +19,11 @@ export default { expect(p.getAttribute('style')).not.toBe(snapshots.style); expect(p.getAttribute('style')).toBe('background-color: red; border-color: red;'); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - '[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"' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + 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"', + '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 2e614b659c..c8b044f4b1 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 @@ -17,10 +17,11 @@ export default { expect(text.nodeType).toBe(Node.TEXT_NODE); expect(text.nodeValue).toBe(snapshots.comment.nodeValue); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Hydration mismatch: incorrect node type received' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '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 82b97d6a9b..c7eb6a8dae 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 @@ -19,10 +19,11 @@ export default { expect(text.nodeType).toBe(Node.ELEMENT_NODE); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - '[LWC error]: Hydration mismatch: incorrect node type received' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + '[LWC error]: Hydration mismatch: incorrect node type received', + 'Hydration completed with errors.', + ], + }); }, }; diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/class-mismatch-excluded/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/class-mismatch-excluded/index.spec.js index bc7dfa659f..25464f0543 100644 --- a/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/class-mismatch-excluded/index.spec.js +++ b/packages/@lwc/integration-karma/test-hydration/mismatches/with-validation-opt-out/class-mismatch-excluded/index.spec.js @@ -1,9 +1,10 @@ export default { test(_target, _snapshots, consoleCalls) { - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Mismatch hydrating element : attribute "class" has different values' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + 'Mismatch hydrating element : attribute "class" has different values', + '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 f6d5988667..842a8a6974 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 @@ -14,10 +14,11 @@ export default { const hydratedSnapshot = this.snapshot(target); expect(hydratedSnapshot.childMarkup).not.toBe(snapshots.childMarkup); - expect(consoleCalls.error).toHaveSize(2); - expect(consoleCalls.error[0][0].message).toContain( - 'Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.' - ); - expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.'); + TestUtils.expectConsoleCallsDev(consoleCalls, { + error: [ + 'Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.', + 'Hydration completed with errors.', + ], + }); }, };