diff --git a/.eslintrc.js b/.eslintrc.js index b5205817a4c9..13746fb3c672 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -434,7 +434,6 @@ module.exports = { es6: true, node: true, jest: true, - jasmine: true, }, globals: { diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json index 3184834be234..c621bd87b99e 100644 --- a/fixtures/dom/package.json +++ b/fixtures/dom/package.json @@ -11,7 +11,7 @@ "classnames": "^2.2.5", "codemirror": "^5.40.0", "core-js": "^2.4.1", - "jest-diff": "^25.1.0", + "jest-diff": "^29.3.1", "prop-types": "^15.6.0", "query-string": "^4.2.3", "react": "^15.4.1", diff --git a/fixtures/dom/src/toWarnDev.js b/fixtures/dom/src/toWarnDev.js index b4cd7554d5f8..13b3d928111c 100644 --- a/fixtures/dom/src/toWarnDev.js +++ b/fixtures/dom/src/toWarnDev.js @@ -1,7 +1,7 @@ // copied from scripts/jest/matchers/toWarnDev.js 'use strict'; -const jestDiff = require('jest-diff').default; +const {diff: jestDiff} = require('jest-diff'); const util = require('util'); function shouldIgnoreConsoleError(format, args) { diff --git a/fixtures/dom/yarn.lock b/fixtures/dom/yarn.lock index 89401d8cebaa..45e1e6ab218c 100644 --- a/fixtures/dom/yarn.lock +++ b/fixtures/dom/yarn.lock @@ -7,47 +7,17 @@ resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.12.10.tgz#f77f6750d0ab88c7c23234dd2d2f3800f170a573" integrity sha512-e3sJ7uwwjiGWv7qeATKrP+Mjltr6JEurPh3yR0dBb9ie2YDnKl52lO82f+Ha+HAtyxTHfsPIXwgFmWKsCT2zOQ== -"@jest/types@^25.5.0": - version "25.5.0" - resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.5.0.tgz#4d6a4793f7b9599fc3680877b856a97dbccf2a9d" - integrity sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw== +"@jest/schemas@^29.0.0": + version "29.0.0" + resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.0.0.tgz#5f47f5994dd4ef067fb7b4188ceac45f77fe952a" + integrity sha512-3Ab5HgYIIAnS0HjqJHQYZS+zXc4tUmTmBH3z83ajI6afXp8X3ZtdLX+nXx+I7LNkJD7uN9LAVhgnjDgZa2z0kA== dependencies: - "@types/istanbul-lib-coverage" "^2.0.0" - "@types/istanbul-reports" "^1.1.1" - "@types/yargs" "^15.0.0" - chalk "^3.0.0" + "@sinclair/typebox" "^0.24.1" -"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": - version "2.0.3" - resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762" - integrity sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw== - -"@types/istanbul-lib-report@*": - version "3.0.0" - resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686" - integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg== - dependencies: - "@types/istanbul-lib-coverage" "*" - -"@types/istanbul-reports@^1.1.1": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz#e875cc689e47bce549ec81f3df5e6f6f11cfaeb2" - integrity sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw== - dependencies: - "@types/istanbul-lib-coverage" "*" - "@types/istanbul-lib-report" "*" - -"@types/yargs-parser@*": - version "15.0.0" - resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d" - integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw== - -"@types/yargs@^15.0.0": - version "15.0.11" - resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.11.tgz#361d7579ecdac1527687bcebf9946621c12ab78c" - integrity sha512-jfcNBxHFYJ4nPIacsi3woz1+kvUO6s1CyeEhtnDHBjHUMNj5UlW2GynmnSgiJJEdNg9yW5C8lfoNRZrHGv5EqA== - dependencies: - "@types/yargs-parser" "*" +"@sinclair/typebox@^0.24.1": + version "0.24.51" + resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f" + integrity sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA== abab@^1.0.3: version "1.0.4" @@ -184,11 +154,6 @@ ansi-regex@^3.0.0: resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998" integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg= -ansi-regex@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75" - integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg== - ansi-styles@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe" @@ -201,13 +166,18 @@ ansi-styles@^3.0.0, ansi-styles@^3.2.1: dependencies: color-convert "^1.9.0" -ansi-styles@^4.0.0, ansi-styles@^4.1.0: +ansi-styles@^4.1.0: version "4.3.0" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937" integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg== dependencies: color-convert "^2.0.1" +ansi-styles@^5.0.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b" + integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA== + anymatch@^1.3.0: version "1.3.2" resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a" @@ -1655,10 +1625,10 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1: escape-string-regexp "^1.0.5" supports-color "^5.3.0" -chalk@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4" - integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg== +chalk@^4.0.0: + version "4.1.2" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" + integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== dependencies: ansi-styles "^4.1.0" supports-color "^7.1.0" @@ -2409,10 +2379,10 @@ detect-port-alt@1.1.6: address "^1.0.1" debug "^2.6.0" -diff-sequences@^25.2.6: - version "25.2.6" - resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd" - integrity sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg== +diff-sequences@^29.3.1: + version "29.3.1" + resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.3.1.tgz#104b5b95fe725932421a9c6e5b4bef84c3f2249e" + integrity sha512-hlM3QR272NXCi4pq+N4Kok4kOp6EsgOM3ZSpJI7Da3UAs+Ttsi8MRmB6trM/lhyzUxGfOgnpkHtgqm5Q/CTcfQ== diff@^3.2.0: version "3.5.0" @@ -4599,15 +4569,15 @@ jest-diff@^20.0.3: jest-matcher-utils "^20.0.3" pretty-format "^20.0.3" -jest-diff@^25.1.0: - version "25.5.0" - resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.5.0.tgz#1dd26ed64f96667c068cef026b677dfa01afcfa9" - integrity sha512-z1kygetuPiREYdNIumRpAHY6RXiGmp70YHptjdaxTWGmA085W3iCnXNx0DhflK3vwrKmrRWyY1wUpkPMVxMK7A== +jest-diff@^29.3.1: + version "29.3.1" + resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.3.1.tgz#d8215b72fed8f1e647aed2cae6c752a89e757527" + integrity sha512-vU8vyiO7568tmin2lA3r2DP8oRvzhvRcD4DjpXc6uGveQodyk7CKLhQlCSiwgx3g0pFaE88/KLZ0yaTWMc4Uiw== dependencies: - chalk "^3.0.0" - diff-sequences "^25.2.6" - jest-get-type "^25.2.6" - pretty-format "^25.5.0" + chalk "^4.0.0" + diff-sequences "^29.3.1" + jest-get-type "^29.2.0" + pretty-format "^29.3.1" jest-docblock@^20.0.3: version "20.0.3" @@ -4631,10 +4601,10 @@ jest-environment-node@^20.0.3: jest-mock "^20.0.3" jest-util "^20.0.3" -jest-get-type@^25.2.6: - version "25.2.6" - resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877" - integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig== +jest-get-type@^29.2.0: + version "29.2.0" + resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.2.0.tgz#726646f927ef61d583a3b3adb1ab13f3a5036408" + integrity sha512-uXNJlg8hKFEnDgFsrCjznB+sTxdkuqiCL6zMgA75qEbAJjJYTs9XPrvDctrEig2GDow22T/LvHgO57iJhXB/UA== jest-haste-map@^20.0.4: version "20.0.5" @@ -6359,15 +6329,14 @@ pretty-format@^20.0.3: ansi-regex "^2.1.1" ansi-styles "^3.0.0" -pretty-format@^25.5.0: - version "25.5.0" - resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.5.0.tgz#7873c1d774f682c34b8d48b6743a2bf2ac55791a" - integrity sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ== +pretty-format@^29.3.1: + version "29.3.1" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.3.1.tgz#1841cac822b02b4da8971dacb03e8a871b4722da" + integrity sha512-FyLnmb1cYJV8biEIiRyzRFvs2lry7PPIvOqKVe1GCUEYg4YGmlx1qG9EJNMxArYm7piII4qb8UV1Pncq5dxmcg== dependencies: - "@jest/types" "^25.5.0" - ansi-regex "^5.0.0" - ansi-styles "^4.0.0" - react-is "^16.12.0" + "@jest/schemas" "^29.0.0" + ansi-styles "^5.0.0" + react-is "^18.0.0" private@^0.1.6, private@^0.1.7, private@^0.1.8: version "0.1.8" @@ -6595,11 +6564,16 @@ react-error-overlay@^4.0.1: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89" integrity sha512-xXUbDAZkU08aAkjtUvldqbvI04ogv+a1XdHxvYuHPYKIVk/42BIOD0zSKTHAWV4+gDy3yGm283z2072rA2gdtw== -react-is@^16.12.0, react-is@^16.8.1: +react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-is@^18.0.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" + integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== + react-scripts@^1.0.11: version "1.1.5" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.1.5.tgz#3041610ab0826736b52197711a4c4e3756e97768" diff --git a/fixtures/legacy-jsx-runtimes/setupTests.js b/fixtures/legacy-jsx-runtimes/setupTests.js index 72116dea9df4..9bc9438b98f5 100644 --- a/fixtures/legacy-jsx-runtimes/setupTests.js +++ b/fixtures/legacy-jsx-runtimes/setupTests.js @@ -5,7 +5,7 @@ const expect = global.expect; -const jestDiff = require('jest-diff').default; +const {diff: jestDiff} = require('jest-diff'); const util = require('util'); function shouldIgnoreConsoleError(format, args) { diff --git a/package.json b/package.json index 90ee3304af4f..2ab7f03bc32d 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@babel/preset-react": "^7.10.4", "@babel/traverse": "^7.11.0", "abort-controller": "^3.0.0", + "abortcontroller-polyfill": "^1.7.5", "art": "0.10.1", "babel-plugin-syntax-trailing-function-commas": "^6.5.0", "chalk": "^3.0.0", @@ -59,7 +60,7 @@ "eslint-plugin-no-function-declare-after-return": "^1.0.0", "eslint-plugin-react": "^6.7.1", "eslint-plugin-react-internal": "link:./scripts/eslint-rules", - "fbjs-scripts": "1.2.0", + "fbjs-scripts": "^3.0.1", "filesize": "^6.0.1", "flow-bin": "^0.196.3", "flow-remove-types": "^2.196.1", @@ -69,16 +70,17 @@ "gzip-size": "^5.1.1", "hermes-eslint": "^0.9.0", "hermes-parser": "^0.9.0", - "jasmine-check": "^1.0.0-rc.0", - "jest": "^26.6.3", - "jest-cli": "^26.6.3", - "jest-diff": "^26.6.2", + "jest": "^29.4.1", + "jest-cli": "^29.4.1", + "jest-diff": "^29.4.1", + "jest-environment-jsdom": "^29.4.1", "jest-snapshot-serializer-raw": "^1.1.0", "minimatch": "^3.0.4", "minimist": "^1.2.3", "mkdirp": "^0.5.1", "ncp": "^2.0.0", "pacote": "^10.3.0", + "pretty-format": "^29.4.1", "prettier": "2.8.3", "prop-types": "^15.6.2", "random-seed": "^0.3.0", diff --git a/packages/dom-event-testing-library/__tests__/index-test.internal.js b/packages/dom-event-testing-library/__tests__/index-test.internal.js index c3644b6ea0e0..3883d9a9ba8c 100644 --- a/packages/dom-event-testing-library/__tests__/index-test.internal.js +++ b/packages/dom-event-testing-library/__tests__/index-test.internal.js @@ -49,7 +49,7 @@ describe('createEventTarget', () => { const target = createEventTarget(node); expect(target.node).toEqual(node); expect(Object.keys(target)).toMatchInlineSnapshot(` - Array [ + [ "node", "blur", "click", @@ -337,18 +337,20 @@ describe('createEventTarget', () => { test('.setBoundingClientRect()', () => { const target = createEventTarget(node); expect(node.getBoundingClientRect()).toMatchInlineSnapshot(` - Object { + { "bottom": 0, "height": 0, "left": 0, "right": 0, "top": 0, "width": 0, + "x": 0, + "y": 0, } `); target.setBoundingClientRect({x: 10, y: 20, width: 100, height: 200}); expect(node.getBoundingClientRect()).toMatchInlineSnapshot(` - Object { + { "bottom": 220, "height": 200, "left": 10, diff --git a/packages/jest-mock-scheduler/README.md b/packages/jest-mock-scheduler/README.md deleted file mode 100644 index 387f01524661..000000000000 --- a/packages/jest-mock-scheduler/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# `jest-mock-scheduler` - -Jest matchers and utilities for testing the `scheduler` package. - -This package is experimental. APIs may change between releases. \ No newline at end of file diff --git a/packages/jest-mock-scheduler/npm/index.js b/packages/jest-mock-scheduler/npm/index.js deleted file mode 100644 index 9a1d6ca4d149..000000000000 --- a/packages/jest-mock-scheduler/npm/index.js +++ /dev/null @@ -1,3 +0,0 @@ -'use strict'; - -module.exports = require('scheduler/unstable_mock'); diff --git a/packages/jest-mock-scheduler/package.json b/packages/jest-mock-scheduler/package.json deleted file mode 100644 index 16761b19d375..000000000000 --- a/packages/jest-mock-scheduler/package.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "name": "jest-mock-scheduler", - "private": true, - "version": "0.1.0", - "description": "Jest matchers and utilities for testing the scheduler package.", - "main": "index.js", - "repository": { - "type" : "git", - "url" : "https://github.com/facebook/react.git", - "directory": "packages/jest-mock-scheduler" - }, - "keywords": [ - "jest", - "scheduler" - ], - "license": "MIT", - "bugs": { - "url": "https://github.com/facebook/react/issues" - }, - "homepage": "https://reactjs.org/", - "peerDependencies": { - "jest": "^23.0.1 || ^24.0.0 || ^25.1.0", - "scheduler": "^0.20.0" - }, - "files": [ - "LICENSE", - "README.md", - "index.js", - "cjs/" - ] -} diff --git a/packages/jest-react/package.json b/packages/jest-react/package.json index 9921c329e941..5415885de7f9 100644 --- a/packages/jest-react/package.json +++ b/packages/jest-react/package.json @@ -19,7 +19,7 @@ }, "homepage": "https://reactjs.org/", "peerDependencies": { - "jest": "^23.0.1 || ^24.0.0 || ^25.1.0", + "jest": ">=23.0.1", "react": "^18.2.0", "react-test-renderer": "^18.2.0" }, diff --git a/packages/jest-react/src/internalAct.js b/packages/jest-react/src/internalAct.js index 1b5349554c40..97ce6a655ec6 100644 --- a/packages/jest-react/src/internalAct.js +++ b/packages/jest-react/src/internalAct.js @@ -29,8 +29,8 @@ export function act(scope: () => Thenable | T): Thenable { ); } - // $FlowFixMe: _isMockFunction doesn't exist on function - if (setTimeout._isMockFunction !== true) { + // $FlowFixMe: Flow doesn't know about global Jest object + if (!jest.isMockFunction(setTimeout)) { throw Error( "This version of `act` requires Jest's timer mocks " + '(i.e. jest.useFakeTimers).', diff --git a/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap b/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap index c8c5609ad922..7c39c18bc965 100644 --- a/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap +++ b/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap @@ -3,10 +3,10 @@ exports[`ReactARTComponents should generate a where top radius is 0 if the sum of the top radius is greater than width 1`] = ` where top radius is 0 if t exports[`ReactARTComponents should generate a with a radius property of 0 when bottom left radius prop is negative 1`] = ` with a radius property of exports[`ReactARTComponents should generate a with a radius property of 0 when bottom right radius prop is negative 1`] = ` with a radius property of exports[`ReactARTComponents should generate a with a radius property of 0 when top left radius prop is negative 1`] = ` with a radius property of exports[`ReactARTComponents should generate a with a radius property of 0 when top right radius prop is negative 1`] = ` with a radius property of exports[`ReactARTComponents should generate a with positive height when height prop is negative 1`] = ` with positive height when exports[`ReactARTComponents should generate a with positive width when width prop is negative 1`] = ` with positive width when w exports[`ReactARTComponents should generate a with props for drawing the Circle 1`] = ` with props for drawing the exports[`ReactARTComponents should generate a with props for drawing the Rectangle 1`] = ` with props for drawing the exports[`ReactARTComponents should generate a with props for drawing the Wedge 1`] = ` { }; }); + afterEach(() => { + jest.restoreAllMocks(); + }); + function clientReference(value) { return Object.defineProperties( function () { @@ -240,7 +244,7 @@ describe('ReactFlight', () => { ReactNoop.render(rootModel); }); expect(ReactNoop).toMatchRenderedOutput('Loading...'); - spyOnDevAndProd(console, 'error'); + spyOnDevAndProd(console, 'error').mockImplementation(() => {}); await load(); expect(console.error).toHaveBeenCalledTimes(1); }); @@ -322,7 +326,7 @@ describe('ReactFlight', () => { ReactNoop.render(rootModel); }); expect(ReactNoop).toMatchRenderedOutput('Loading...'); - spyOnDevAndProd(console, 'error'); + spyOnDevAndProd(console, 'error').mockImplementation(() => {}); await load(); expect(console.error).toHaveBeenCalledTimes(1); }); diff --git a/packages/react-devtools-extensions/flow-typed/jest.js b/packages/react-devtools-extensions/flow-typed/jest.js index 3cad1447b12c..5ed91242791a 100644 --- a/packages/react-devtools-extensions/flow-typed/jest.js +++ b/packages/react-devtools-extensions/flow-typed/jest.js @@ -1172,28 +1172,5 @@ declare var expect: { }, }; -// TODO handle return type -// https://jasmine.github.io/2.4/introduction.html#section-Spies -declare function spyOn(value: mixed, method: string): Object; - /** Holds all functions related to manipulating test runner */ declare var jest: JestObjectType; - -/** - * The global Jasmine object, this is generally not exposed as the public API, - * using features inside here could break in later versions of Jest. - */ -declare var jasmine: { - DEFAULT_TIMEOUT_INTERVAL: number, - any(value: mixed): JestAsymmetricEqualityType, - anything(): any, - arrayContaining(value: Array): Array, - clock(): JestClockType, - createSpy(name: string): JestSpyType, - createSpyObj( - baseName: string, - methodNames: Array - ): {[methodName: string]: JestSpyType}, - objectContaining(value: Object): Object, - stringMatching(value: string): string, -}; diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js index 107182bb445a..72f112cf5a5a 100644 --- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js +++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js @@ -47,6 +47,10 @@ describe('Timeline profiler', () => { store = global.store; }); + afterEach(() => { + jest.restoreAllMocks(); + }); + describe('User Timing API', () => { let clearedMarks; let featureDetectionMarkName = null; @@ -130,7 +134,7 @@ describe('Timeline profiler', () => { renderHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-2", "--render-start-2", "--render-stop", @@ -151,7 +155,7 @@ describe('Timeline profiler', () => { renderRootHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-32", ] `); @@ -161,7 +165,7 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushUntilNextPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--render-start-32", "--render-stop", "--commit-start-32", @@ -196,7 +200,7 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushAndYieldThrough(['Foo']); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-128", "--render-start-128", "--component-render-start-Foo", @@ -219,7 +223,7 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-2", "--render-start-2", "--component-render-start-Example", @@ -242,7 +246,7 @@ describe('Timeline profiler', () => { await fakeSuspensePromise; expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--suspense-resolved-0-Example", ] `); @@ -261,7 +265,7 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-2", "--render-start-2", "--component-render-start-Example", @@ -299,7 +303,7 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-32", ] `); @@ -309,7 +313,7 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushUntilNextPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--render-start-32", "--component-render-start-Example", "--component-render-stop", @@ -331,7 +335,7 @@ describe('Timeline profiler', () => { await fakeSuspensePromise; expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--suspense-resolved-0-Example", ] `); @@ -350,7 +354,7 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-32", ] `); @@ -360,7 +364,7 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushUntilNextPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--render-start-32", "--component-render-start-Example", "--component-render-stop", @@ -382,7 +386,7 @@ describe('Timeline profiler', () => { await expect(fakeSuspensePromise).rejects.toThrow(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--suspense-rejected-0-Example", ] `); @@ -402,7 +406,7 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-32", ] `); @@ -412,7 +416,7 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushUntilNextPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--render-start-32", "--component-render-start-Example", "--component-render-stop", @@ -455,7 +459,7 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-32", ] `); @@ -465,7 +469,7 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushUntilNextPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--render-start-32", "--component-render-start-Example", "--component-render-stop", @@ -509,7 +513,7 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-32", ] `); @@ -517,7 +521,7 @@ describe('Timeline profiler', () => { clearPendingMarks(); let errorMessage; - spyOn(console, 'error').and.callFake(message => { + jest.spyOn(console, 'error').mockImplementation(message => { errorMessage = message; }); @@ -529,7 +533,7 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--render-start-32", "--component-render-start-Example", "--schedule-state-update-32-Example", @@ -563,7 +567,7 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-32", ] `); @@ -571,7 +575,7 @@ describe('Timeline profiler', () => { clearPendingMarks(); let errorMessage; - spyOn(console, 'error').and.callFake(message => { + jest.spyOn(console, 'error').mockImplementation(message => { errorMessage = message; }); @@ -583,7 +587,7 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--render-start-32", "--component-render-start-Example", "--schedule-forced-update-32-Example", @@ -614,7 +618,7 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-32", ] `); @@ -624,7 +628,7 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushUntilNextPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--render-start-32", "--component-render-start-Example", "--component-render-stop", @@ -670,7 +674,7 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushAndYield([]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-32", "--render-start-32", "--component-render-start-Example", @@ -719,7 +723,7 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushAndYield([]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-32", "--render-start-32", "--component-render-start-Example", @@ -740,7 +744,7 @@ describe('Timeline profiler', () => { }); it('should mark sync render that throws', async () => { - spyOn(console, 'error'); + jest.spyOn(console, 'error').mockImplementation(() => {}); class ErrorBoundary extends React.Component { state = {error: null}; @@ -766,7 +770,7 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-2", "--render-start-2", "--component-render-start-ErrorBoundary", @@ -802,7 +806,7 @@ describe('Timeline profiler', () => { }); it('should mark concurrent render that throws', async () => { - spyOn(console, 'error'); + jest.spyOn(console, 'error').mockImplementation(() => {}); class ErrorBoundary extends React.Component { state = {error: null}; @@ -829,7 +833,7 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-32", ] `); @@ -839,7 +843,7 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushUntilNextPaint([]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--render-start-32", "--component-render-start-ErrorBoundary", "--component-render-stop", @@ -929,7 +933,7 @@ describe('Timeline profiler', () => { ]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-32", "--render-start-32", "--component-render-start-ComponentWithEffects", @@ -960,7 +964,7 @@ describe('Timeline profiler', () => { ]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--passive-effects-start-32", "--component-passive-effect-mount-start-ComponentWithEffects", "--component-passive-effect-mount-stop", @@ -987,7 +991,7 @@ describe('Timeline profiler', () => { ]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-2", "--render-start-2", "--render-stop", @@ -1021,7 +1025,7 @@ describe('Timeline profiler', () => { renderHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-2", "--render-start-2", "--render-stop", @@ -1041,7 +1045,7 @@ describe('Timeline profiler', () => { it('regression test DefaultLane', () => { renderRootHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-render-32", ] `); @@ -1069,7 +1073,7 @@ describe('Timeline profiler', () => { await Promise.resolve(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-state-update-2-App", "--render-start-2", "--component-render-start-App", @@ -1109,7 +1113,7 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushAndYield([]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ + [ "--schedule-state-update-8-App", "--render-start-8", "--component-render-start-App", @@ -1189,8 +1193,8 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "schedule-render", @@ -1205,8 +1209,8 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", @@ -1243,8 +1247,8 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "Example", "componentStack": " in Example (at **)", @@ -1253,7 +1257,7 @@ describe('Timeline profiler', () => { "type": "schedule-state-update", "warning": null, }, - Object { + { "componentName": "Example", "componentStack": " in Example (at **)", @@ -1262,7 +1266,7 @@ describe('Timeline profiler', () => { "type": "schedule-state-update", "warning": null, }, - Object { + { "componentName": "Example", "componentStack": " in Example (at **)", @@ -1271,7 +1275,7 @@ describe('Timeline profiler', () => { "type": "schedule-state-update", "warning": null, }, - Object { + { "componentName": "Example", "componentStack": " in Example (at **)", @@ -1283,15 +1287,15 @@ describe('Timeline profiler', () => { ] `); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "Example", "duration": 0, "timestamp": 10, "type": "render", "warning": null, }, - Object { + { "componentName": "Example", "duration": 10, "timestamp": 10, @@ -1369,7 +1373,7 @@ describe('Timeline profiler', () => { expect(timelineData.suspenseEvents).toHaveLength(1); const suspenseEvent = timelineData.suspenseEvents[0]; expect(suspenseEvent).toMatchInlineSnapshot(` - Object { + { "componentName": "Example", "depth": 0, "duration": 10, @@ -1427,7 +1431,7 @@ describe('Timeline profiler', () => { expect(timelineData.suspenseEvents).toHaveLength(1); const suspenseEvent = timelineData.suspenseEvents[0]; expect(suspenseEvent).toMatchInlineSnapshot(` - Object { + { "componentName": "Example", "depth": 0, "duration": 10, @@ -1485,7 +1489,7 @@ describe('Timeline profiler', () => { expect(timelineData.suspenseEvents).toHaveLength(1); const suspenseEvent = timelineData.suspenseEvents[0]; expect(suspenseEvent).toMatchInlineSnapshot(` - Object { + { "componentName": "Example", "depth": 0, "duration": 10, @@ -1543,7 +1547,7 @@ describe('Timeline profiler', () => { expect(timelineData.suspenseEvents).toHaveLength(1); const suspenseEvent = timelineData.suspenseEvents[0]; expect(suspenseEvent).toMatchInlineSnapshot(` - Object { + { "componentName": "Example", "depth": 0, "duration": 10, @@ -1584,15 +1588,15 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "Example", "duration": 10, "timestamp": 10, "type": "render", "warning": null, }, - Object { + { "componentName": "Example", "duration": 10, "timestamp": 20, @@ -1602,14 +1606,14 @@ describe('Timeline profiler', () => { ] `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, - Object { + { "componentName": "Example", "componentStack": " in Example (at **)", @@ -1643,15 +1647,15 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "Example", "duration": 10, "timestamp": 10, "type": "render", "warning": null, }, - Object { + { "componentName": "Example", "duration": 10, "timestamp": 20, @@ -1661,14 +1665,14 @@ describe('Timeline profiler', () => { ] `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, - Object { + { "componentName": "Example", "lanes": "0b0000000000000000000000000000010", "timestamp": 20, @@ -1697,7 +1701,7 @@ describe('Timeline profiler', () => { renderRootHelper(); let errorMessage; - spyOn(console, 'error').and.callFake(message => { + jest.spyOn(console, 'error').mockImplementation(message => { errorMessage = message; }); @@ -1711,15 +1715,15 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "Example", "duration": 10, "timestamp": 10, "type": "render", "warning": null, }, - Object { + { "componentName": "Example", "duration": 10, "timestamp": 20, @@ -1729,14 +1733,14 @@ describe('Timeline profiler', () => { ] `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, - Object { + { "componentName": "Example", "componentStack": " in Example (at **)", @@ -1766,7 +1770,7 @@ describe('Timeline profiler', () => { renderRootHelper(); let errorMessage; - spyOn(console, 'error').and.callFake(message => { + jest.spyOn(console, 'error').mockImplementation(message => { errorMessage = message; }); @@ -1780,15 +1784,15 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "Example", "duration": 10, "timestamp": 10, "type": "render", "warning": null, }, - Object { + { "componentName": "Example", "duration": 10, "timestamp": 20, @@ -1798,14 +1802,14 @@ describe('Timeline profiler', () => { ] `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, - Object { + { "componentName": "Example", "lanes": "0b0000000000000000000000000100000", "timestamp": 20, @@ -1835,22 +1839,22 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "Example", "duration": 10, "timestamp": 10, "type": "render", "warning": null, }, - Object { + { "componentName": "Example", "duration": 1, "timestamp": 20, "type": "layout-effect-mount", "warning": null, }, - Object { + { "componentName": "Example", "duration": 10, "timestamp": 21, @@ -1860,14 +1864,14 @@ describe('Timeline profiler', () => { ] `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, - Object { + { "componentName": "Example", "componentStack": " in Example (at **)", @@ -1898,22 +1902,22 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "Example", "duration": 10, "timestamp": 10, "type": "render", "warning": null, }, - Object { + { "componentName": "Example", "duration": 1, "timestamp": 20, "type": "passive-effect-mount", "warning": null, }, - Object { + { "componentName": "Example", "duration": 10, "timestamp": 21, @@ -1923,14 +1927,14 @@ describe('Timeline profiler', () => { ] `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, - Object { + { "componentName": "Example", "componentStack": " in Example (at **)", @@ -1961,8 +1965,8 @@ describe('Timeline profiler', () => { // Render phase updates should be retried as part of the same batch. expect(timelineData.batchUIDToMeasuresMap.size).toBe(1); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "Example", "duration": 20, "timestamp": 10, @@ -1972,14 +1976,14 @@ describe('Timeline profiler', () => { ] `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, - Object { + { "componentName": "Example", "componentStack": " in Example (at **)", @@ -1993,7 +1997,7 @@ describe('Timeline profiler', () => { }); it('should mark sync render that throws', async () => { - spyOn(console, 'error'); + jest.spyOn(console, 'error').mockImplementation(() => {}); class ErrorBoundary extends React.Component { state = {error: null}; @@ -2031,22 +2035,22 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "ErrorBoundary", "duration": 10, "timestamp": 10, "type": "render", "warning": null, }, - Object { + { "componentName": "ExampleThatThrows", "duration": 0, "timestamp": 20, "type": "render", "warning": null, }, - Object { + { "componentName": "ErrorBoundary", "duration": 10, "timestamp": 20, @@ -2056,14 +2060,14 @@ describe('Timeline profiler', () => { ] `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "schedule-render", "warning": null, }, - Object { + { "componentName": "ErrorBoundary", "componentStack": " in ErrorBoundary (at **)", @@ -2075,8 +2079,8 @@ describe('Timeline profiler', () => { ] `); expect(timelineData.thrownErrors).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "ExampleThatThrows", "message": "Expected error", "phase": "mount", @@ -2088,7 +2092,7 @@ describe('Timeline profiler', () => { }); it('should mark concurrent render that throws', async () => { - spyOn(console, 'error'); + jest.spyOn(console, 'error').mockImplementation(() => {}); class ErrorBoundary extends React.Component { state = {error: null}; @@ -2130,36 +2134,36 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "ErrorBoundary", "duration": 10, "timestamp": 10, "type": "render", "warning": null, }, - Object { + { "componentName": "ExampleThatThrows", "duration": 0, "timestamp": 20, "type": "render", "warning": null, }, - Object { + { "componentName": "ErrorBoundary", "duration": 10, "timestamp": 20, "type": "render", "warning": null, }, - Object { + { "componentName": "ExampleThatThrows", "duration": 0, "timestamp": 30, "type": "render", "warning": null, }, - Object { + { "componentName": "ErrorBoundary", "duration": 10, "timestamp": 30, @@ -2169,14 +2173,14 @@ describe('Timeline profiler', () => { ] `); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, - Object { + { "componentName": "ErrorBoundary", "componentStack": " in ErrorBoundary (at **)", @@ -2188,15 +2192,15 @@ describe('Timeline profiler', () => { ] `); expect(timelineData.thrownErrors).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "ExampleThatThrows", "message": "Expected error", "phase": "mount", "timestamp": 20, "type": "thrown-error", }, - Object { + { "componentName": "ExampleThatThrows", "message": "Expected error", "phase": "mount", @@ -2274,78 +2278,78 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.componentMeasures).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "componentName": "ComponentWithEffects", "duration": 0, "timestamp": 10, "type": "render", "warning": null, }, - Object { + { "componentName": "ComponentWithEffects", "duration": 0, "timestamp": 10, "type": "layout-effect-mount", "warning": null, }, - Object { + { "componentName": "ComponentWithEffects", "duration": 0, "timestamp": 10, "type": "layout-effect-mount", "warning": null, }, - Object { + { "componentName": "ComponentWithEffects", "duration": 0, "timestamp": 10, "type": "passive-effect-mount", "warning": null, }, - Object { + { "componentName": "ComponentWithEffects", "duration": 0, "timestamp": 10, "type": "passive-effect-mount", "warning": null, }, - Object { + { "componentName": "ComponentWithEffects", "duration": 0, "timestamp": 10, "type": "passive-effect-mount", "warning": null, }, - Object { + { "componentName": "ComponentWithEffects", "duration": 0, "timestamp": 10, "type": "layout-effect-unmount", "warning": null, }, - Object { + { "componentName": "ComponentWithEffects", "duration": 0, "timestamp": 10, "type": "layout-effect-unmount", "warning": null, }, - Object { + { "componentName": "ComponentWithEffects", "duration": 0, "timestamp": 10, "type": "passive-effect-unmount", "warning": null, }, - Object { + { "componentName": "ComponentWithEffects", "duration": 0, "timestamp": 10, "type": "passive-effect-unmount", "warning": null, }, - Object { + { "componentName": "ComponentWithEffects", "duration": 0, "timestamp": 10, @@ -2356,8 +2360,8 @@ describe('Timeline profiler', () => { `); expect(timelineData.batchUIDToMeasuresMap).toMatchInlineSnapshot(` Map { - 1 => Array [ - Object { + 1 => [ + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2365,7 +2369,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render-idle", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2373,7 +2377,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2381,7 +2385,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "commit", }, - Object { + { "batchUID": 1, "depth": 1, "duration": 0, @@ -2389,7 +2393,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "layout-effects", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2398,8 +2402,8 @@ describe('Timeline profiler', () => { "type": "passive-effects", }, ], - 2 => Array [ - Object { + 2 => [ + { "batchUID": 2, "depth": 0, "duration": 0, @@ -2407,7 +2411,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render-idle", }, - Object { + { "batchUID": 2, "depth": 0, "duration": 0, @@ -2415,7 +2419,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render", }, - Object { + { "batchUID": 2, "depth": 0, "duration": 0, @@ -2423,7 +2427,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "commit", }, - Object { + { "batchUID": 2, "depth": 1, "duration": 0, @@ -2431,7 +2435,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "layout-effects", }, - Object { + { "batchUID": 2, "depth": 1, "duration": 0, @@ -2469,14 +2473,14 @@ describe('Timeline profiler', () => { const timelineData = stopProfilingAndGetTimelineData(); expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, - Object { + { "componentName": "Child", "componentStack": " in Child (at **) diff --git a/packages/react-devtools-shared/src/__tests__/bridge-test.js b/packages/react-devtools-shared/src/__tests__/bridge-test.js index 67c1615c2b43..d38c0fe66a8b 100644 --- a/packages/react-devtools-shared/src/__tests__/bridge-test.js +++ b/packages/react-devtools-shared/src/__tests__/bridge-test.js @@ -38,7 +38,7 @@ describe('Bridge', () => { expect(wall.send).toHaveBeenCalledWith('shutdown'); // Verify that the Bridge doesn't send messages after shutdown. - spyOn(console, 'warn'); + jest.spyOn(console, 'warn').mockImplementation(() => {}); wall.send.mockClear(); bridge.send('should not send'); jest.runAllTimers(); diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js index 2606213faa4a..6e86f42a74a1 100644 --- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js +++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js @@ -186,12 +186,12 @@ describe('InspectedElement', () => { const inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement).toMatchInlineSnapshot(` - Object { + { "context": null, "events": undefined, - "hooks": Array [ - Object { - "hookSource": Object { + "hooks": [ + { + "hookSource": { "columnNumber": "removed by Jest serializer", "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js", "functionName": "Example", @@ -200,13 +200,13 @@ describe('InspectedElement', () => { "id": 0, "isStateEditable": true, "name": "State", - "subHooks": Array [], + "subHooks": [], "value": 1, }, ], "id": 2, "owners": null, - "props": Object { + "props": { "a": 1, "b": "abc", }, @@ -330,7 +330,7 @@ describe('InspectedElement', () => { let inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { + { "a": 1, "b": "abc", } @@ -353,7 +353,7 @@ describe('InspectedElement', () => { inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { + { "a": 2, "b": "def", } @@ -386,7 +386,7 @@ describe('InspectedElement', () => { let inspectedElement = await inspectElementAtIndex(1); expect(targetRenderCount).toBe(1); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { + { "a": 1, "b": "abc", } @@ -416,7 +416,7 @@ describe('InspectedElement', () => { inspectedElement = await inspectElementAtIndex(1); expect(targetRenderCount).toBe(2); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { + { "a": 2, "b": "def", } @@ -450,7 +450,7 @@ describe('InspectedElement', () => { let inspectedElement = await inspectElementAtIndex(1); expect(targetRenderCount).toBe(1); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { + { "a": 1, "b": "abc", } @@ -557,7 +557,7 @@ describe('InspectedElement', () => { const inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { + { "boolean_false": false, "boolean_true": true, "float": 1.23, @@ -657,7 +657,7 @@ describe('InspectedElement', () => { const inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { + { "anonymous_fn": Dehydrated { "preview_short": ƒ () {}, "preview_long": ƒ () {}, @@ -666,7 +666,7 @@ describe('InspectedElement', () => { "preview_short": ArrayBuffer(3), "preview_long": ArrayBuffer(3), }, - "array_of_arrays": Array [ + "array_of_arrays": [ Dehydrated { "preview_short": Array(2), "preview_long": [Array(3), Array(0)], @@ -696,7 +696,7 @@ describe('InspectedElement', () => { "preview_short":
, "preview_long":
, }, - "immutable": Object { + "immutable": { "0": Dehydrated { "preview_short": Array(2), "preview_long": ["a", List(3)], @@ -710,7 +710,7 @@ describe('InspectedElement', () => { "preview_long": ["c", Map(2)], }, }, - "map": Object { + "map": { "0": Dehydrated { "preview_short": Array(2), "preview_long": ["name", "Brian"], @@ -720,7 +720,7 @@ describe('InspectedElement', () => { "preview_long": ["food", "sushi"], }, }, - "map_of_maps": Object { + "map_of_maps": { "0": Dehydrated { "preview_short": Array(2), "preview_long": ["first", Map(2)], @@ -730,13 +730,13 @@ describe('InspectedElement', () => { "preview_long": ["second", Map(2)], }, }, - "object_of_objects": Object { + "object_of_objects": { "inner": Dehydrated { "preview_short": {…}, "preview_long": {boolean: true, number: 123, string: "abc"}, }, }, - "object_with_symbol": Object { + "object_with_symbol": { "Symbol(name)": "hello", }, "proxy": Dehydrated { @@ -751,11 +751,11 @@ describe('InspectedElement', () => { "preview_short": /abc/giu, "preview_long": /abc/giu, }, - "set": Object { + "set": { "0": "abc", "1": 123, }, - "set_of_sets": Object { + "set_of_sets": { "0": Dehydrated { "preview_short": Set(3), "preview_long": Set(3) {"a", "b", "c"}, @@ -769,7 +769,7 @@ describe('InspectedElement', () => { "preview_short": Symbol(symbol), "preview_long": Symbol(symbol), }, - "typed_array": Object { + "typed_array": { "0": 100, "1": -100, "2": 0, @@ -794,7 +794,7 @@ describe('InspectedElement', () => { const inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { + { "prop": Dehydrated { "preview_short": Generator, "preview_long": Generator, @@ -818,8 +818,8 @@ describe('InspectedElement', () => { const inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "object": Object { + { + "object": { "boolean": true, "number": 123, "string": "abc", @@ -844,8 +844,8 @@ describe('InspectedElement', () => { const inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "object": Object { + { + "object": { "hasOwnProperty": true, "name": "blah", }, @@ -880,8 +880,8 @@ describe('InspectedElement', () => { const inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "data": Object { + { + "data": { "_number": 42, "number": 42, }, @@ -959,8 +959,8 @@ describe('InspectedElement', () => { const inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "object": Object { + { + "object": { "123": 3, "Symbol(enumerableSymbol)": 3, "Symbol(enumerableSymbolBase)": 1, @@ -1014,8 +1014,8 @@ describe('InspectedElement', () => { const inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "data": Object { + { + "data": { "a": undefined, "b": Infinity, "c": NaN, @@ -1080,8 +1080,8 @@ describe('InspectedElement', () => { } expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { + { + "nestedObject": { "a": Dehydrated { "preview_short": {…}, "preview_long": {b: {…}}, @@ -1093,10 +1093,10 @@ describe('InspectedElement', () => { await loadPath(['props', 'nestedObject', 'a']); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { - "a": Object { - "b": Object { + { + "nestedObject": { + "a": { + "b": { "c": Dehydrated { "preview_short": Array(1), "preview_long": [{…}], @@ -1110,12 +1110,12 @@ describe('InspectedElement', () => { await loadPath(['props', 'nestedObject', 'a', 'b', 'c']); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { - "a": Object { - "b": Object { - "c": Array [ - Object { + { + "nestedObject": { + "a": { + "b": { + "c": [ + { "d": Dehydrated { "preview_short": {…}, "preview_long": {e: {…}}, @@ -1131,14 +1131,14 @@ describe('InspectedElement', () => { await loadPath(['props', 'nestedObject', 'a', 'b', 'c', 0, 'd']); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { - "a": Object { - "b": Object { - "c": Array [ - Object { - "d": Object { - "e": Object {}, + { + "nestedObject": { + "a": { + "b": { + "c": [ + { + "d": { + "e": {}, }, }, ], @@ -1151,9 +1151,9 @@ describe('InspectedElement', () => { await loadPath(['hooks', 0, 'value']); expect(inspectedElement.hooks).toMatchInlineSnapshot(` - Array [ - Object { - "hookSource": Object { + [ + { + "hookSource": { "columnNumber": "removed by Jest serializer", "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js", "functionName": "Example", @@ -1162,9 +1162,9 @@ describe('InspectedElement', () => { "id": 0, "isStateEditable": true, "name": "State", - "subHooks": Array [], - "value": Object { - "foo": Object { + "subHooks": [], + "value": { + "foo": { "bar": Dehydrated { "preview_short": {…}, "preview_long": {baz: "hi"}, @@ -1178,9 +1178,9 @@ describe('InspectedElement', () => { await loadPath(['hooks', 0, 'value', 'foo', 'bar']); expect(inspectedElement.hooks).toMatchInlineSnapshot(` - Array [ - Object { - "hookSource": Object { + [ + { + "hookSource": { "columnNumber": "removed by Jest serializer", "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js", "functionName": "Example", @@ -1189,10 +1189,10 @@ describe('InspectedElement', () => { "id": 0, "isStateEditable": true, "name": "State", - "subHooks": Array [], - "value": Object { - "foo": Object { - "bar": Object { + "subHooks": [], + "value": { + "foo": { + "bar": { "baz": "hi", }, }, @@ -1235,8 +1235,8 @@ describe('InspectedElement', () => { } expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "set_of_sets": Object { + { + "set_of_sets": { "0": Dehydrated { "preview_short": Set(3), "preview_long": Set(3) {1, 2, 3}, @@ -1252,9 +1252,9 @@ describe('InspectedElement', () => { await loadPath(['props', 'set_of_sets', 0]); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "set_of_sets": Object { - "0": Object { + { + "set_of_sets": { + "0": { "0": 1, "1": 2, "2": 3, @@ -1317,8 +1317,8 @@ describe('InspectedElement', () => { } expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { + { + "nestedObject": { "a": Dehydrated { "preview_short": {…}, "preview_long": {b: {…}, value: 1}, @@ -1334,10 +1334,10 @@ describe('InspectedElement', () => { await loadPath(['props', 'nestedObject', 'a']); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { - "a": Object { - "b": Object { + { + "nestedObject": { + "a": { + "b": { "value": 1, }, "value": 1, @@ -1353,16 +1353,16 @@ describe('InspectedElement', () => { await loadPath(['props', 'nestedObject', 'c']); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { - "a": Object { - "b": Object { + { + "nestedObject": { + "a": { + "b": { "value": 1, }, "value": 1, }, - "c": Object { - "d": Object { + "c": { + "d": { "e": Dehydrated { "preview_short": {…}, "preview_long": {value: 1}, @@ -1408,16 +1408,16 @@ describe('InspectedElement', () => { inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { - "a": Object { - "b": Object { + { + "nestedObject": { + "a": { + "b": { "value": 2, }, "value": 2, }, - "c": Object { - "d": Object { + "c": { + "d": { "e": Dehydrated { "preview_short": {…}, "preview_long": {value: 2}, @@ -1480,8 +1480,8 @@ describe('InspectedElement', () => { } expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { + { + "nestedObject": { "a": Dehydrated { "preview_short": {…}, "preview_long": {b: {…}, value: 1}, @@ -1497,10 +1497,10 @@ describe('InspectedElement', () => { await loadPath(['props', 'nestedObject', 'a']); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { - "a": Object { - "b": Object { + { + "nestedObject": { + "a": { + "b": { "value": 1, }, "value": 1, @@ -1543,16 +1543,16 @@ describe('InspectedElement', () => { await loadPath(['props', 'nestedObject', 'c']); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { - "a": Object { - "b": Object { + { + "nestedObject": { + "a": { + "b": { "value": 2, }, "value": 2, }, - "c": Object { - "d": Object { + "c": { + "d": { "e": Dehydrated { "preview_short": {…}, "preview_long": {value: 2}, @@ -1607,8 +1607,8 @@ describe('InspectedElement', () => { } expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { + { + "nestedObject": { "a": Dehydrated { "preview_short": {…}, "preview_long": {b: {…}, value: 1}, @@ -1638,10 +1638,10 @@ describe('InspectedElement', () => { await loadPath(['props', 'nestedObject', 'a']); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { - "a": Object { - "b": Object { + { + "nestedObject": { + "a": { + "b": { "value": 2, }, "value": 2, @@ -1666,12 +1666,12 @@ describe('InspectedElement', () => { const inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement).toMatchInlineSnapshot(` - Object { + { "context": null, "events": undefined, - "hooks": Array [ - Object { - "hookSource": Object { + "hooks": [ + { + "hookSource": { "columnNumber": "removed by Jest serializer", "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js", "functionName": "Example", @@ -1680,13 +1680,13 @@ describe('InspectedElement', () => { "id": null, "isStateEditable": false, "name": "Context", - "subHooks": Array [], + "subHooks": [], "value": true, }, ], "id": 2, "owners": null, - "props": Object { + "props": { "a": 1, "b": "abc", }, @@ -1930,9 +1930,9 @@ describe('InspectedElement', () => { const {hooks} = await inspectElementAtIndex(0); expect(hooks).toMatchInlineSnapshot(` - Array [ - Object { - "hookSource": Object { + [ + { + "hookSource": { "columnNumber": "removed by Jest serializer", "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js", "functionName": "DisplayedComplexValue", @@ -1941,9 +1941,9 @@ describe('InspectedElement', () => { "id": null, "isStateEditable": false, "name": "DebuggableHook", - "subHooks": Array [ - Object { - "hookSource": Object { + "subHooks": [ + { + "hookSource": { "columnNumber": "removed by Jest serializer", "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js", "functionName": "useDebuggableHook", @@ -1952,11 +1952,11 @@ describe('InspectedElement', () => { "id": 0, "isStateEditable": true, "name": "State", - "subHooks": Array [], + "subHooks": [], "value": 1, }, ], - "value": Object { + "value": { "foo": 2, }, }, @@ -1985,8 +1985,8 @@ describe('InspectedElement', () => { const inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "proxy": Object { + { + "proxy": { "$$typeof": Dehydrated { "preview_short": ƒ () {}, "preview_long": ƒ () {}, @@ -2014,13 +2014,13 @@ describe('InspectedElement', () => { // Select/inspect element let inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement).toMatchInlineSnapshot(` - Object { + { "context": null, "events": undefined, "hooks": null, "id": 2, "owners": null, - "props": Object {}, + "props": {}, "rootType": "render()", "state": null, } @@ -2052,13 +2052,13 @@ describe('InspectedElement', () => { // Select/inspect the same element again inspectedElement = await inspectElementAtIndex(0); expect(inspectedElement).toMatchInlineSnapshot(` - Object { + { "context": null, "events": undefined, "hooks": null, "id": 2, "owners": null, - "props": Object {}, + "props": {}, "rootType": "render()", "state": null, } @@ -2121,7 +2121,7 @@ describe('InspectedElement', () => { }); it('should gracefully surface backend errors on the frontend rather than timing out', async () => { - spyOn(console, 'error'); + jest.spyOn(console, 'error').mockImplementation(() => {}); let shouldThrow = false; @@ -2166,10 +2166,10 @@ describe('InspectedElement', () => { await inspectElementAtIndex(0); expect(global.$r).toMatchInlineSnapshot(` - Object { - "hooks": Array [ - Object { - "hookSource": Object { + { + "hooks": [ + { + "hookSource": { "columnNumber": "removed by Jest serializer", "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js", "functionName": "Example", @@ -2178,11 +2178,11 @@ describe('InspectedElement', () => { "id": 0, "isStateEditable": true, "name": "State", - "subHooks": Array [], + "subHooks": [], "value": 1, }, ], - "props": Object { + "props": { "a": 1, "b": "abc", }, @@ -2205,10 +2205,10 @@ describe('InspectedElement', () => { await inspectElementAtIndex(0); expect(global.$r).toMatchInlineSnapshot(` - Object { - "hooks": Array [ - Object { - "hookSource": Object { + { + "hooks": [ + { + "hookSource": { "columnNumber": "removed by Jest serializer", "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js", "functionName": "Example", @@ -2217,11 +2217,11 @@ describe('InspectedElement', () => { "id": 0, "isStateEditable": true, "name": "State", - "subHooks": Array [], + "subHooks": [], "value": 1, }, ], - "props": Object { + "props": { "a": 1, "b": "abc", }, @@ -2244,10 +2244,10 @@ describe('InspectedElement', () => { await inspectElementAtIndex(0); expect(global.$r).toMatchInlineSnapshot(` - Object { - "hooks": Array [ - Object { - "hookSource": Object { + { + "hooks": [ + { + "hookSource": { "columnNumber": "removed by Jest serializer", "fileName": "react-devtools-shared/src/__tests__/inspectedElement-test.js", "functionName": "Example", @@ -2256,11 +2256,11 @@ describe('InspectedElement', () => { "id": 0, "isStateEditable": true, "name": "State", - "subHooks": Array [], + "subHooks": [], "value": 1, }, ], - "props": Object { + "props": { "a": 1, "b": "abc", }, @@ -2287,13 +2287,13 @@ describe('InspectedElement', () => { await inspectElementAtIndex(0); expect(global.$r.props).toMatchInlineSnapshot(` - Object { + { "a": 1, "b": "abc", } `); expect(global.$r.state).toMatchInlineSnapshot(` - Object { + { "count": 0, } `); @@ -2354,15 +2354,15 @@ describe('InspectedElement', () => { const data = await getErrorsAndWarningsForElementAtIndex(0); expect(data).toMatchInlineSnapshot(` - Object { - "errors": Array [ - Array [ + { + "errors": [ + [ "test-only: render error", 1, ], ], - "warnings": Array [ - Array [ + "warnings": [ + [ "test-only: render warning", 1, ], @@ -2389,15 +2389,15 @@ describe('InspectedElement', () => { }); const data = await getErrorsAndWarningsForElementAtIndex(0); expect(data).toMatchInlineSnapshot(` - Object { - "errors": Array [ - Array [ + { + "errors": [ + [ "test-only: render error", 2, ], ], - "warnings": Array [ - Array [ + "warnings": [ + [ "test-only: render warning", 3, ], @@ -2426,15 +2426,15 @@ describe('InspectedElement', () => { const data = await getErrorsAndWarningsForElementAtIndex(0); expect(data).toMatchInlineSnapshot(` - Object { - "errors": Array [ - Array [ + { + "errors": [ + [ "test-only: useLayoutEffect error", 1, ], ], - "warnings": Array [ - Array [ + "warnings": [ + [ "test-only: useLayoutEffect warning", 1, ], @@ -2463,15 +2463,15 @@ describe('InspectedElement', () => { const data = await getErrorsAndWarningsForElementAtIndex(0); expect(data).toMatchInlineSnapshot(` - Object { - "errors": Array [ - Array [ + { + "errors": [ + [ "test-only: useEffect error", 1, ], ], - "warnings": Array [ - Array [ + "warnings": [ + [ "test-only: useEffect warning", 1, ], @@ -2497,15 +2497,15 @@ describe('InspectedElement', () => { const data = await getErrorsAndWarningsForElementAtIndex(0); expect(data).toMatchInlineSnapshot(` - Object { - "errors": Array [ - Array [ - "Warning: Each child in a list should have a unique \\"key\\" prop. See https://reactjs.org/link/warning-keys for more information. + { + "errors": [ + [ + "Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information. at Example", 1, ], ], - "warnings": Array [], + "warnings": [], } `); }); @@ -2534,9 +2534,9 @@ describe('InspectedElement', () => { const data = await getErrorsAndWarningsForElementAtIndex(0); expect(data).toMatchInlineSnapshot(` - Object { - "errors": Array [], - "warnings": Array [], + { + "errors": [], + "warnings": [], } `); }); @@ -2577,29 +2577,29 @@ describe('InspectedElement', () => { await getErrorsAndWarningsForElementAtIndex(1), ]; expect(data).toMatchInlineSnapshot(` - Array [ - Object { - "errors": Array [ - Array [ + [ + { + "errors": [ + [ "test-only: render error #1", 1, ], ], - "warnings": Array [ - Array [ + "warnings": [ + [ "test-only: render warning #1", 1, ], ], }, - Object { - "errors": Array [ - Array [ + { + "errors": [ + [ "test-only: render error #2", 1, ], ], - "warnings": Array [], + "warnings": [], }, ] `); @@ -2615,24 +2615,24 @@ describe('InspectedElement', () => { await getErrorsAndWarningsForElementAtIndex(1), ]; expect(data).toMatchInlineSnapshot(` - Array [ - Object { - "errors": Array [ - Array [ + [ + { + "errors": [ + [ "test-only: render error #1", 1, ], ], - "warnings": Array [], + "warnings": [], }, - Object { - "errors": Array [ - Array [ + { + "errors": [ + [ "test-only: render error #2", 1, ], ], - "warnings": Array [], + "warnings": [], }, ] `); @@ -2674,25 +2674,25 @@ describe('InspectedElement', () => { await getErrorsAndWarningsForElementAtIndex(1), ]; expect(data).toMatchInlineSnapshot(` - Array [ - Object { - "errors": Array [ - Array [ + [ + { + "errors": [ + [ "test-only: render error #1", 1, ], ], - "warnings": Array [ - Array [ + "warnings": [ + [ "test-only: render warning #1", 1, ], ], }, - Object { - "errors": Array [], - "warnings": Array [ - Array [ + { + "errors": [], + "warnings": [ + [ "test-only: render warning #2", 1, ], @@ -2712,20 +2712,20 @@ describe('InspectedElement', () => { await getErrorsAndWarningsForElementAtIndex(1), ]; expect(data).toMatchInlineSnapshot(` - Array [ - Object { - "errors": Array [], - "warnings": Array [ - Array [ + [ + { + "errors": [], + "warnings": [ + [ "test-only: render warning #1", 1, ], ], }, - Object { - "errors": Array [], - "warnings": Array [ - Array [ + { + "errors": [], + "warnings": [ + [ "test-only: render warning #2", 1, ], @@ -2738,7 +2738,7 @@ describe('InspectedElement', () => { it('inspecting nested renderers should not throw', async () => { // Ignoring react art warnings - spyOn(console, 'error'); + jest.spyOn(console, 'error').mockImplementation(() => {}); const ReactArt = require('react-art'); const ArtSVGMode = require('art/modes/svg'); const ARTCurrentMode = require('art/modes/current'); @@ -2773,15 +2773,15 @@ describe('InspectedElement', () => { const inspectedElement = await inspectElementAtIndex(4); expect(inspectedElement.owners).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "displayName": "Child", "hocDisplayNames": null, "id": 3, "key": null, "type": 5, }, - Object { + { "displayName": "App", "hocDisplayNames": null, "id": 2, diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js index b89fab7c1e8c..ba8064bc3ca3 100644 --- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js +++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js @@ -74,13 +74,13 @@ describe('InspectedElementContext', () => { const inspectedElement = await read(id); expect(inspectedElement).toMatchInlineSnapshot(` - Object { - "context": Object {}, + { + "context": {}, "events": undefined, "hooks": null, "id": 2, "owners": null, - "props": Object { + "props": { "a": 1, "b": "abc", }, @@ -117,13 +117,13 @@ describe('InspectedElementContext', () => { const inspectedElement = await read(id); expect(inspectedElement).toMatchInlineSnapshot(` - Object { - "context": Object {}, + { + "context": {}, "events": undefined, "hooks": null, "id": 2, "owners": null, - "props": Object { + "props": { "boolean_false": false, "boolean_true": true, "float": 1.23, @@ -213,7 +213,7 @@ describe('InspectedElementContext', () => { const inspectedElement = await read(id); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { + { "anonymous_fn": Dehydrated { "preview_short": ƒ () {}, "preview_long": ƒ () {}, @@ -222,7 +222,7 @@ describe('InspectedElementContext', () => { "preview_short": ArrayBuffer(3), "preview_long": ArrayBuffer(3), }, - "array_of_arrays": Array [ + "array_of_arrays": [ Dehydrated { "preview_short": Array(2), "preview_long": [Array(3), Array(0)], @@ -252,7 +252,7 @@ describe('InspectedElementContext', () => { "preview_short":
, "preview_long":
, }, - "immutable": Object { + "immutable": { "0": Dehydrated { "preview_short": Array(2), "preview_long": ["a", List(3)], @@ -266,7 +266,7 @@ describe('InspectedElementContext', () => { "preview_long": ["c", Map(2)], }, }, - "map": Object { + "map": { "0": Dehydrated { "preview_short": Array(2), "preview_long": ["name", "Brian"], @@ -276,7 +276,7 @@ describe('InspectedElementContext', () => { "preview_long": ["food", "sushi"], }, }, - "map_of_maps": Object { + "map_of_maps": { "0": Dehydrated { "preview_short": Array(2), "preview_long": ["first", Map(2)], @@ -286,7 +286,7 @@ describe('InspectedElementContext', () => { "preview_long": ["second", Map(2)], }, }, - "object_of_objects": Object { + "object_of_objects": { "inner": Dehydrated { "preview_short": {…}, "preview_long": {boolean: true, number: 123, string: "abc"}, @@ -300,11 +300,11 @@ describe('InspectedElementContext', () => { "preview_short": /abc/giu, "preview_long": /abc/giu, }, - "set": Object { + "set": { "0": "abc", "1": 123, }, - "set_of_sets": Object { + "set_of_sets": { "0": Dehydrated { "preview_short": Set(3), "preview_long": Set(3) {"a", "b", "c"}, @@ -318,7 +318,7 @@ describe('InspectedElementContext', () => { "preview_short": Symbol(symbol), "preview_long": Symbol(symbol), }, - "typed_array": Object { + "typed_array": { "0": 100, "1": -100, "2": 0, @@ -347,8 +347,8 @@ describe('InspectedElementContext', () => { const inspectedElement = await read(id); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "object": Object { + { + "object": { "boolean": true, "number": 123, "string": "abc", @@ -404,13 +404,13 @@ describe('InspectedElementContext', () => { const inspectedElement = await read(id); expect(inspectedElement).toMatchInlineSnapshot(` - Object { - "context": Object {}, + { + "context": {}, "events": undefined, "hooks": null, "id": 2, "owners": null, - "props": Object { + "props": { "iteratable": Dehydrated { "preview_short": Generator, "preview_long": Generator, @@ -459,14 +459,14 @@ describe('InspectedElementContext', () => { const inspectedElement = await read(id); expect(inspectedElement).toMatchInlineSnapshot(` - Object { - "context": Object {}, + { + "context": {}, "events": undefined, "hooks": null, "id": 2, "owners": null, - "props": Object { - "data": Object { + "props": { + "data": { "_number": 42, "number": 42, }, @@ -549,14 +549,14 @@ describe('InspectedElementContext', () => { const inspectedElement = await read(id); expect(inspectedElement).toMatchInlineSnapshot(` - Object { - "context": Object {}, + { + "context": {}, "events": undefined, "hooks": null, "id": 2, "owners": null, - "props": Object { - "data": Object { + "props": { + "data": { "123": 3, "Symbol(enumerableSymbol)": 3, "Symbol(enumerableSymbolBase)": 1, @@ -619,8 +619,8 @@ describe('InspectedElementContext', () => { const inspectedElement = await read(id); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "data": Object { + { + "data": { "a": undefined, "b": Infinity, "c": NaN, @@ -659,8 +659,8 @@ describe('InspectedElementContext', () => { let inspectedElement = await read(id); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { + { + "nestedObject": { "a": Dehydrated { "preview_short": {…}, "preview_long": {b: {…}}, @@ -671,10 +671,10 @@ describe('InspectedElementContext', () => { inspectedElement = await read(id, ['props', 'nestedObject', 'a']); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { - "a": Object { - "b": Object { + { + "nestedObject": { + "a": { + "b": { "c": Dehydrated { "preview_short": Array(1), "preview_long": [{…}], @@ -687,12 +687,12 @@ describe('InspectedElementContext', () => { inspectedElement = await read(id, ['props', 'nestedObject', 'a', 'b', 'c']); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { - "a": Object { - "b": Object { - "c": Array [ - Object { + { + "nestedObject": { + "a": { + "b": { + "c": [ + { "d": Dehydrated { "preview_short": {…}, "preview_long": {e: {…}}, @@ -715,14 +715,14 @@ describe('InspectedElementContext', () => { 'd', ]); expect(inspectedElement.props).toMatchInlineSnapshot(` - Object { - "nestedObject": Object { - "a": Object { - "b": Object { - "c": Array [ - Object { - "d": Object { - "e": Object {}, + { + "nestedObject": { + "a": { + "b": { + "c": [ + { + "d": { + "e": {}, }, }, ], @@ -760,7 +760,7 @@ describe('InspectedElementContext', () => { const rendererID = ((store.getRendererIDForElement(id): any): number); const logSpy = jest.fn(); - spyOn(console, 'log').and.callFake(logSpy); + jest.spyOn(console, 'log').mockImplementation(logSpy); // Should store the whole value (not just the hydrated parts) backendAPI.storeAsGlobal({ diff --git a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js index dfdea1c21a1f..0da44023c02d 100644 --- a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js +++ b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js @@ -114,14 +114,14 @@ describe('OwnersListContext', () => { const firstChild = ((store.getElementAtIndex(2): any): Element); expect(await getOwnersListForOwner(parent)).toMatchInlineSnapshot(` - Array [ + [ "Grandparent", "Parent", ] `); expect(await getOwnersListForOwner(firstChild)).toMatchInlineSnapshot(` - Array [ + [ "Grandparent", "Parent", "Child", @@ -157,7 +157,7 @@ describe('OwnersListContext', () => { const firstChild = ((store.getElementAtIndex(1): any): Element); expect(await getOwnersListForOwner(firstChild)).toMatchInlineSnapshot(` - Array [ + [ "Grandparent", "Parent", "Child", @@ -183,7 +183,7 @@ describe('OwnersListContext', () => { const grandparent = ((store.getElementAtIndex(0): any): Element); expect(await getOwnersListForOwner(grandparent)).toMatchInlineSnapshot(` - Array [ + [ "Grandparent", ] `); @@ -212,7 +212,7 @@ describe('OwnersListContext', () => { const wrapped = ((store.getElementAtIndex(2): any): Element); expect(await getOwnersListForOwner(wrapped)).toMatchInlineSnapshot(` - Array [ + [ "Grandparent", "InnerComponent", "InnerComponent", diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js index 282b33eba59e..1464912034ef 100644 --- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js +++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js @@ -322,11 +322,11 @@ describe('Timeline profiler', () => { randomSample, ]); expect(data).toMatchInlineSnapshot(` - Object { + { "batchUIDToMeasuresMap": Map {}, - "componentMeasures": Array [], + "componentMeasures": [], "duration": 0.005, - "flamechart": Array [], + "flamechart": [], "internalModuleSourceToRanges": Map {}, "laneToLabelMap": Map { 0 => "Sync", @@ -362,48 +362,48 @@ describe('Timeline profiler', () => { 30 => "Offscreen", }, "laneToReactMeasureMap": Map { - 0 => Array [], - 1 => Array [], - 2 => Array [], - 3 => Array [], - 4 => Array [], - 5 => Array [], - 6 => Array [], - 7 => Array [], - 8 => Array [], - 9 => Array [], - 10 => Array [], - 11 => Array [], - 12 => Array [], - 13 => Array [], - 14 => Array [], - 15 => Array [], - 16 => Array [], - 17 => Array [], - 18 => Array [], - 19 => Array [], - 20 => Array [], - 21 => Array [], - 22 => Array [], - 23 => Array [], - 24 => Array [], - 25 => Array [], - 26 => Array [], - 27 => Array [], - 28 => Array [], - 29 => Array [], - 30 => Array [], + 0 => [], + 1 => [], + 2 => [], + 3 => [], + 4 => [], + 5 => [], + 6 => [], + 7 => [], + 8 => [], + 9 => [], + 10 => [], + 11 => [], + 12 => [], + 13 => [], + 14 => [], + 15 => [], + 16 => [], + 17 => [], + 18 => [], + 19 => [], + 20 => [], + 21 => [], + 22 => [], + 23 => [], + 24 => [], + 25 => [], + 26 => [], + 27 => [], + 28 => [], + 29 => [], + 30 => [], }, - "nativeEvents": Array [], - "networkMeasures": Array [], - "otherUserTimingMarks": Array [], + "nativeEvents": [], + "networkMeasures": [], + "otherUserTimingMarks": [], "reactVersion": "", - "schedulingEvents": Array [], + "schedulingEvents": [], "snapshotHeight": 0, - "snapshots": Array [], + "snapshots": [], "startTime": 1, - "suspenseEvents": Array [], - "thrownErrors": Array [], + "suspenseEvents": [], + "thrownErrors": [], } `); }); @@ -447,10 +447,10 @@ describe('Timeline profiler', () => { }), ]); expect(data).toMatchInlineSnapshot(` - Object { + { "batchUIDToMeasuresMap": Map { - 0 => Array [ - Object { + 0 => [ + { "batchUID": 0, "depth": 0, "duration": 0.005, @@ -458,7 +458,7 @@ describe('Timeline profiler', () => { "timestamp": 0.006, "type": "render-idle", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.001, @@ -466,7 +466,7 @@ describe('Timeline profiler', () => { "timestamp": 0.006, "type": "render", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.003, @@ -474,7 +474,7 @@ describe('Timeline profiler', () => { "timestamp": 0.008, "type": "commit", }, - Object { + { "batchUID": 0, "depth": 1, "duration": 0.001, @@ -484,9 +484,9 @@ describe('Timeline profiler', () => { }, ], }, - "componentMeasures": Array [], + "componentMeasures": [], "duration": 0.011, - "flamechart": Array [], + "flamechart": [], "internalModuleSourceToRanges": Map {}, "laneToLabelMap": Map { 0 => "Sync", @@ -522,17 +522,17 @@ describe('Timeline profiler', () => { 30 => "Offscreen", }, "laneToReactMeasureMap": Map { - 0 => Array [], - 1 => Array [], - 2 => Array [], - 3 => Array [], - 4 => Array [], - 5 => Array [], - 6 => Array [], - 7 => Array [], - 8 => Array [], - 9 => Array [ - Object { + 0 => [], + 1 => [], + 2 => [], + 3 => [], + 4 => [], + 5 => [], + 6 => [], + 7 => [], + 8 => [], + 9 => [ + { "batchUID": 0, "depth": 0, "duration": 0.005, @@ -540,7 +540,7 @@ describe('Timeline profiler', () => { "timestamp": 0.006, "type": "render-idle", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.001, @@ -548,7 +548,7 @@ describe('Timeline profiler', () => { "timestamp": 0.006, "type": "render", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.003, @@ -556,7 +556,7 @@ describe('Timeline profiler', () => { "timestamp": 0.008, "type": "commit", }, - Object { + { "batchUID": 0, "depth": 1, "duration": 0.001, @@ -565,34 +565,34 @@ describe('Timeline profiler', () => { "type": "layout-effects", }, ], - 10 => Array [], - 11 => Array [], - 12 => Array [], - 13 => Array [], - 14 => Array [], - 15 => Array [], - 16 => Array [], - 17 => Array [], - 18 => Array [], - 19 => Array [], - 20 => Array [], - 21 => Array [], - 22 => Array [], - 23 => Array [], - 24 => Array [], - 25 => Array [], - 26 => Array [], - 27 => Array [], - 28 => Array [], - 29 => Array [], - 30 => Array [], + 10 => [], + 11 => [], + 12 => [], + 13 => [], + 14 => [], + 15 => [], + 16 => [], + 17 => [], + 18 => [], + 19 => [], + 20 => [], + 21 => [], + 22 => [], + 23 => [], + 24 => [], + 25 => [], + 26 => [], + 27 => [], + 28 => [], + 29 => [], + 30 => [], }, - "nativeEvents": Array [], - "networkMeasures": Array [], - "otherUserTimingMarks": Array [], + "nativeEvents": [], + "networkMeasures": [], + "otherUserTimingMarks": [], "reactVersion": "", - "schedulingEvents": Array [ - Object { + "schedulingEvents": [ + { "lanes": "0b0000000000000000000000000001001", "timestamp": 0.005, "type": "schedule-render", @@ -600,10 +600,10 @@ describe('Timeline profiler', () => { }, ], "snapshotHeight": 0, - "snapshots": Array [], + "snapshots": [], "startTime": 1, - "suspenseEvents": Array [], - "thrownErrors": Array [], + "suspenseEvents": [], + "thrownErrors": [], } `); }); @@ -616,10 +616,10 @@ describe('Timeline profiler', () => { ...createUserTimingData(clearedMarks), ]); expect(data).toMatchInlineSnapshot(` - Object { + { "batchUIDToMeasuresMap": Map { - 0 => Array [ - Object { + 0 => [ + { "batchUID": 0, "depth": 0, "duration": 0.01, @@ -627,7 +627,7 @@ describe('Timeline profiler', () => { "timestamp": 0.006, "type": "render-idle", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.001, @@ -635,7 +635,7 @@ describe('Timeline profiler', () => { "timestamp": 0.006, "type": "render", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.008, @@ -643,7 +643,7 @@ describe('Timeline profiler', () => { "timestamp": 0.008, "type": "commit", }, - Object { + { "batchUID": 0, "depth": 1, "duration": 0.001, @@ -653,19 +653,19 @@ describe('Timeline profiler', () => { }, ], }, - "componentMeasures": Array [], + "componentMeasures": [], "duration": 0.016, - "flamechart": Array [], + "flamechart": [], "internalModuleSourceToRanges": Map { - undefined => Array [ - Array [ - Object { + undefined => [ + [ + { "columnNumber": 0, "functionName": "filtered", "lineNumber": 0, "source": " at filtered (:0:0)", }, - Object { + { "columnNumber": 1, "functionName": "filtered", "lineNumber": 1, @@ -708,9 +708,9 @@ describe('Timeline profiler', () => { 30 => "Offscreen", }, "laneToReactMeasureMap": Map { - 0 => Array [], - 1 => Array [ - Object { + 0 => [], + 1 => [ + { "batchUID": 0, "depth": 0, "duration": 0.01, @@ -718,7 +718,7 @@ describe('Timeline profiler', () => { "timestamp": 0.006, "type": "render-idle", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.001, @@ -726,7 +726,7 @@ describe('Timeline profiler', () => { "timestamp": 0.006, "type": "render", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.008, @@ -734,7 +734,7 @@ describe('Timeline profiler', () => { "timestamp": 0.008, "type": "commit", }, - Object { + { "batchUID": 0, "depth": 1, "duration": 0.001, @@ -743,42 +743,42 @@ describe('Timeline profiler', () => { "type": "layout-effects", }, ], - 2 => Array [], - 3 => Array [], - 4 => Array [], - 5 => Array [], - 6 => Array [], - 7 => Array [], - 8 => Array [], - 9 => Array [], - 10 => Array [], - 11 => Array [], - 12 => Array [], - 13 => Array [], - 14 => Array [], - 15 => Array [], - 16 => Array [], - 17 => Array [], - 18 => Array [], - 19 => Array [], - 20 => Array [], - 21 => Array [], - 22 => Array [], - 23 => Array [], - 24 => Array [], - 25 => Array [], - 26 => Array [], - 27 => Array [], - 28 => Array [], - 29 => Array [], - 30 => Array [], + 2 => [], + 3 => [], + 4 => [], + 5 => [], + 6 => [], + 7 => [], + 8 => [], + 9 => [], + 10 => [], + 11 => [], + 12 => [], + 13 => [], + 14 => [], + 15 => [], + 16 => [], + 17 => [], + 18 => [], + 19 => [], + 20 => [], + 21 => [], + 22 => [], + 23 => [], + 24 => [], + 25 => [], + 26 => [], + 27 => [], + 28 => [], + 29 => [], + 30 => [], }, - "nativeEvents": Array [], - "networkMeasures": Array [], - "otherUserTimingMarks": Array [], + "nativeEvents": [], + "networkMeasures": [], + "otherUserTimingMarks": [], "reactVersion": "", - "schedulingEvents": Array [ - Object { + "schedulingEvents": [ + { "lanes": "0b0000000000000000000000000000001", "timestamp": 0.005, "type": "schedule-render", @@ -786,10 +786,10 @@ describe('Timeline profiler', () => { }, ], "snapshotHeight": 0, - "snapshots": Array [], + "snapshots": [], "startTime": 4, - "suspenseEvents": Array [], - "thrownErrors": Array [], + "suspenseEvents": [], + "thrownErrors": [], } `); }); @@ -813,10 +813,10 @@ describe('Timeline profiler', () => { ...createUserTimingData(clearedMarks), ]); expect(data).toMatchInlineSnapshot(` - Object { + { "batchUIDToMeasuresMap": Map { - 0 => Array [ - Object { + 0 => [ + { "batchUID": 0, "depth": 0, "duration": 0.012, @@ -824,7 +824,7 @@ describe('Timeline profiler', () => { "timestamp": 0.006, "type": "render-idle", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.003, @@ -832,7 +832,7 @@ describe('Timeline profiler', () => { "timestamp": 0.006, "type": "render", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.008, @@ -840,7 +840,7 @@ describe('Timeline profiler', () => { "timestamp": 0.01, "type": "commit", }, - Object { + { "batchUID": 0, "depth": 1, "duration": 0.001, @@ -848,7 +848,7 @@ describe('Timeline profiler', () => { "timestamp": 0.016, "type": "layout-effects", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.004, @@ -857,8 +857,8 @@ describe('Timeline profiler', () => { "type": "passive-effects", }, ], - 1 => Array [ - Object { + 1 => [ + { "batchUID": 1, "depth": 0, "duration": 0.012, @@ -866,7 +866,7 @@ describe('Timeline profiler', () => { "timestamp": 0.024, "type": "render-idle", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0.003, @@ -874,7 +874,7 @@ describe('Timeline profiler', () => { "timestamp": 0.024, "type": "render", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0.008, @@ -882,7 +882,7 @@ describe('Timeline profiler', () => { "timestamp": 0.028, "type": "commit", }, - Object { + { "batchUID": 1, "depth": 1, "duration": 0.001, @@ -890,7 +890,7 @@ describe('Timeline profiler', () => { "timestamp": 0.034, "type": "layout-effects", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0.003, @@ -900,29 +900,29 @@ describe('Timeline profiler', () => { }, ], }, - "componentMeasures": Array [ - Object { + "componentMeasures": [ + { "componentName": "App", "duration": 0.001, "timestamp": 0.007, "type": "render", "warning": null, }, - Object { + { "componentName": "App", "duration": 0.002, "timestamp": 0.02, "type": "passive-effect-mount", "warning": null, }, - Object { + { "componentName": "App", "duration": 0.001, "timestamp": 0.025, "type": "render", "warning": null, }, - Object { + { "componentName": "App", "duration": 0.001, "timestamp": 0.038, @@ -931,17 +931,17 @@ describe('Timeline profiler', () => { }, ], "duration": 0.04, - "flamechart": Array [], + "flamechart": [], "internalModuleSourceToRanges": Map { - undefined => Array [ - Array [ - Object { + undefined => [ + [ + { "columnNumber": 0, "functionName": "filtered", "lineNumber": 0, "source": " at filtered (:0:0)", }, - Object { + { "columnNumber": 1, "functionName": "filtered", "lineNumber": 1, @@ -984,13 +984,13 @@ describe('Timeline profiler', () => { 30 => "Offscreen", }, "laneToReactMeasureMap": Map { - 0 => Array [], - 1 => Array [], - 2 => Array [], - 3 => Array [], - 4 => Array [], - 5 => Array [ - Object { + 0 => [], + 1 => [], + 2 => [], + 3 => [], + 4 => [], + 5 => [ + { "batchUID": 0, "depth": 0, "duration": 0.012, @@ -998,7 +998,7 @@ describe('Timeline profiler', () => { "timestamp": 0.006, "type": "render-idle", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.003, @@ -1006,7 +1006,7 @@ describe('Timeline profiler', () => { "timestamp": 0.006, "type": "render", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.008, @@ -1014,7 +1014,7 @@ describe('Timeline profiler', () => { "timestamp": 0.01, "type": "commit", }, - Object { + { "batchUID": 0, "depth": 1, "duration": 0.001, @@ -1022,7 +1022,7 @@ describe('Timeline profiler', () => { "timestamp": 0.016, "type": "layout-effects", }, - Object { + { "batchUID": 0, "depth": 0, "duration": 0.004, @@ -1030,7 +1030,7 @@ describe('Timeline profiler', () => { "timestamp": 0.019, "type": "passive-effects", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0.012, @@ -1038,7 +1038,7 @@ describe('Timeline profiler', () => { "timestamp": 0.024, "type": "render-idle", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0.003, @@ -1046,7 +1046,7 @@ describe('Timeline profiler', () => { "timestamp": 0.024, "type": "render", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0.008, @@ -1054,7 +1054,7 @@ describe('Timeline profiler', () => { "timestamp": 0.028, "type": "commit", }, - Object { + { "batchUID": 1, "depth": 1, "duration": 0.001, @@ -1062,7 +1062,7 @@ describe('Timeline profiler', () => { "timestamp": 0.034, "type": "layout-effects", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0.003, @@ -1071,44 +1071,44 @@ describe('Timeline profiler', () => { "type": "passive-effects", }, ], - 6 => Array [], - 7 => Array [], - 8 => Array [], - 9 => Array [], - 10 => Array [], - 11 => Array [], - 12 => Array [], - 13 => Array [], - 14 => Array [], - 15 => Array [], - 16 => Array [], - 17 => Array [], - 18 => Array [], - 19 => Array [], - 20 => Array [], - 21 => Array [], - 22 => Array [], - 23 => Array [], - 24 => Array [], - 25 => Array [], - 26 => Array [], - 27 => Array [], - 28 => Array [], - 29 => Array [], - 30 => Array [], + 6 => [], + 7 => [], + 8 => [], + 9 => [], + 10 => [], + 11 => [], + 12 => [], + 13 => [], + 14 => [], + 15 => [], + 16 => [], + 17 => [], + 18 => [], + 19 => [], + 20 => [], + 21 => [], + 22 => [], + 23 => [], + 24 => [], + 25 => [], + 26 => [], + 27 => [], + 28 => [], + 29 => [], + 30 => [], }, - "nativeEvents": Array [], - "networkMeasures": Array [], - "otherUserTimingMarks": Array [], + "nativeEvents": [], + "networkMeasures": [], + "otherUserTimingMarks": [], "reactVersion": "", - "schedulingEvents": Array [ - Object { + "schedulingEvents": [ + { "lanes": "0b0000000000000000000000000000101", "timestamp": 0.005, "type": "schedule-render", "warning": null, }, - Object { + { "componentName": "App", "lanes": "0b0000000000000000000000000000101", "timestamp": 0.021, @@ -1117,10 +1117,10 @@ describe('Timeline profiler', () => { }, ], "snapshotHeight": 0, - "snapshots": Array [], + "snapshots": [], "startTime": 4, - "suspenseEvents": Array [], - "thrownErrors": Array [], + "suspenseEvents": [], + "thrownErrors": [], } `); }); @@ -1135,7 +1135,7 @@ describe('Timeline profiler', () => { ); const invalidUserTimingData = createUserTimingData(invalidMarks); - const error = spyOn(console, 'error'); + const error = jest.spyOn(console, 'error').mockImplementation(() => {}); preprocessData([ ...createBoilerplateEntries(), ...invalidUserTimingData, @@ -1153,7 +1153,7 @@ describe('Timeline profiler', () => { ); const invalidUserTimingData = createUserTimingData(invalidMarks); - const error = spyOn(console, 'error'); + const error = jest.spyOn(console, 'error').mockImplementation(() => {}); preprocessData([ ...createBoilerplateEntries(), ...invalidUserTimingData, @@ -1194,16 +1194,16 @@ describe('Timeline profiler', () => { ...userTimingData, ]); expect(data.otherUserTimingMarks).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "name": "VCWithoutImage: root", "timestamp": 0.003, }, - Object { + { "name": "--a-mark-that-looks-like-one-of-ours", "timestamp": 0.004, }, - Object { + { "name": "Some other mark", "timestamp": 0.005, }, @@ -1748,7 +1748,7 @@ describe('Timeline profiler', () => { describe('errors thrown while rendering', () => { // @reactVersion >= 18.0 it('shoult parse Errors thrown during render', async () => { - spyOn(console, 'error'); + jest.spyOn(console, 'error'); class ErrorBoundary extends React.Component { state = {error: null}; @@ -1948,10 +1948,10 @@ describe('Timeline profiler', () => { expect(data).toHaveLength(1); const timelineData = data[0]; expect(timelineData).toMatchInlineSnapshot(` - Object { + { "batchUIDToMeasuresMap": Map { - 1 => Array [ - Object { + 1 => [ + { "batchUID": 1, "depth": 0, "duration": 0, @@ -1959,7 +1959,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render-idle", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0, @@ -1967,7 +1967,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0, @@ -1975,7 +1975,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "commit", }, - Object { + { "batchUID": 1, "depth": 1, "duration": 0, @@ -1985,9 +1985,9 @@ describe('Timeline profiler', () => { }, ], }, - "componentMeasures": Array [], + "componentMeasures": [], "duration": 20, - "flamechart": Array [], + "flamechart": [], "internalModuleSourceToRanges": Map {}, "laneToLabelMap": Map { 1 => "SyncHydrationLane", @@ -2023,9 +2023,9 @@ describe('Timeline profiler', () => { 1073741824 => "Offscreen", }, "laneToReactMeasureMap": Map { - 1 => Array [], - 2 => Array [ - Object { + 1 => [], + 2 => [ + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2033,7 +2033,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render-idle", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2041,7 +2041,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2049,7 +2049,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "commit", }, - Object { + { "batchUID": 1, "depth": 1, "duration": 0, @@ -2058,42 +2058,42 @@ describe('Timeline profiler', () => { "type": "layout-effects", }, ], - 4 => Array [], - 8 => Array [], - 16 => Array [], - 32 => Array [], - 64 => Array [], - 128 => Array [], - 256 => Array [], - 512 => Array [], - 1024 => Array [], - 2048 => Array [], - 4096 => Array [], - 8192 => Array [], - 16384 => Array [], - 32768 => Array [], - 65536 => Array [], - 131072 => Array [], - 262144 => Array [], - 524288 => Array [], - 1048576 => Array [], - 2097152 => Array [], - 4194304 => Array [], - 8388608 => Array [], - 16777216 => Array [], - 33554432 => Array [], - 67108864 => Array [], - 134217728 => Array [], - 268435456 => Array [], - 536870912 => Array [], - 1073741824 => Array [], + 4 => [], + 8 => [], + 16 => [], + 32 => [], + 64 => [], + 128 => [], + 256 => [], + 512 => [], + 1024 => [], + 2048 => [], + 4096 => [], + 8192 => [], + 16384 => [], + 32768 => [], + 65536 => [], + 131072 => [], + 262144 => [], + 524288 => [], + 1048576 => [], + 2097152 => [], + 4194304 => [], + 8388608 => [], + 16777216 => [], + 33554432 => [], + 67108864 => [], + 134217728 => [], + 268435456 => [], + 536870912 => [], + 1073741824 => [], }, - "nativeEvents": Array [], - "networkMeasures": Array [], - "otherUserTimingMarks": Array [], + "nativeEvents": [], + "networkMeasures": [], + "otherUserTimingMarks": [], "reactVersion": "", - "schedulingEvents": Array [ - Object { + "schedulingEvents": [ + { "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "schedule-render", @@ -2101,10 +2101,10 @@ describe('Timeline profiler', () => { }, ], "snapshotHeight": 0, - "snapshots": Array [], + "snapshots": [], "startTime": -10, - "suspenseEvents": Array [], - "thrownErrors": Array [], + "suspenseEvents": [], + "thrownErrors": [], } `); }); @@ -2137,10 +2137,10 @@ describe('Timeline profiler', () => { }); expect(timelineData).toMatchInlineSnapshot(` - Object { + { "batchUIDToMeasuresMap": Map { - 1 => Array [ - Object { + 1 => [ + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2148,7 +2148,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render-idle", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2156,7 +2156,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2164,7 +2164,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "commit", }, - Object { + { "batchUID": 1, "depth": 1, "duration": 0, @@ -2172,7 +2172,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "layout-effects", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2181,8 +2181,8 @@ describe('Timeline profiler', () => { "type": "passive-effects", }, ], - 2 => Array [ - Object { + 2 => [ + { "batchUID": 2, "depth": 0, "duration": 0, @@ -2190,7 +2190,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render-idle", }, - Object { + { "batchUID": 2, "depth": 0, "duration": 0, @@ -2198,7 +2198,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render", }, - Object { + { "batchUID": 2, "depth": 0, "duration": 0, @@ -2206,7 +2206,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "commit", }, - Object { + { "batchUID": 2, "depth": 1, "duration": 0, @@ -2214,7 +2214,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "layout-effects", }, - Object { + { "batchUID": 2, "depth": 0, "duration": 0, @@ -2224,29 +2224,29 @@ describe('Timeline profiler', () => { }, ], }, - "componentMeasures": Array [ - Object { + "componentMeasures": [ + { "componentName": "App", "duration": 0, "timestamp": 10, "type": "render", "warning": null, }, - Object { + { "componentName": "App", "duration": 0, "timestamp": 10, "type": "passive-effect-mount", "warning": null, }, - Object { + { "componentName": "App", "duration": 0, "timestamp": 10, "type": "render", "warning": null, }, - Object { + { "componentName": "App", "duration": 0, "timestamp": 10, @@ -2255,7 +2255,7 @@ describe('Timeline profiler', () => { }, ], "duration": 20, - "flamechart": Array [], + "flamechart": [], "internalModuleSourceToRanges": Map {}, "laneToLabelMap": Map { 1 => "SyncHydrationLane", @@ -2291,13 +2291,13 @@ describe('Timeline profiler', () => { 1073741824 => "Offscreen", }, "laneToReactMeasureMap": Map { - 1 => Array [], - 2 => Array [], - 4 => Array [], - 8 => Array [], - 16 => Array [], - 32 => Array [ - Object { + 1 => [], + 2 => [], + 4 => [], + 8 => [], + 16 => [], + 32 => [ + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2305,7 +2305,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render-idle", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2313,7 +2313,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2321,7 +2321,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "commit", }, - Object { + { "batchUID": 1, "depth": 1, "duration": 0, @@ -2329,7 +2329,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "layout-effects", }, - Object { + { "batchUID": 1, "depth": 0, "duration": 0, @@ -2337,7 +2337,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "passive-effects", }, - Object { + { "batchUID": 2, "depth": 0, "duration": 0, @@ -2345,7 +2345,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render-idle", }, - Object { + { "batchUID": 2, "depth": 0, "duration": 0, @@ -2353,7 +2353,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "render", }, - Object { + { "batchUID": 2, "depth": 0, "duration": 0, @@ -2361,7 +2361,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "commit", }, - Object { + { "batchUID": 2, "depth": 1, "duration": 0, @@ -2369,7 +2369,7 @@ describe('Timeline profiler', () => { "timestamp": 10, "type": "layout-effects", }, - Object { + { "batchUID": 2, "depth": 0, "duration": 0, @@ -2378,44 +2378,44 @@ describe('Timeline profiler', () => { "type": "passive-effects", }, ], - 64 => Array [], - 128 => Array [], - 256 => Array [], - 512 => Array [], - 1024 => Array [], - 2048 => Array [], - 4096 => Array [], - 8192 => Array [], - 16384 => Array [], - 32768 => Array [], - 65536 => Array [], - 131072 => Array [], - 262144 => Array [], - 524288 => Array [], - 1048576 => Array [], - 2097152 => Array [], - 4194304 => Array [], - 8388608 => Array [], - 16777216 => Array [], - 33554432 => Array [], - 67108864 => Array [], - 134217728 => Array [], - 268435456 => Array [], - 536870912 => Array [], - 1073741824 => Array [], + 64 => [], + 128 => [], + 256 => [], + 512 => [], + 1024 => [], + 2048 => [], + 4096 => [], + 8192 => [], + 16384 => [], + 32768 => [], + 65536 => [], + 131072 => [], + 262144 => [], + 524288 => [], + 1048576 => [], + 2097152 => [], + 4194304 => [], + 8388608 => [], + 16777216 => [], + 33554432 => [], + 67108864 => [], + 134217728 => [], + 268435456 => [], + 536870912 => [], + 1073741824 => [], }, - "nativeEvents": Array [], - "networkMeasures": Array [], - "otherUserTimingMarks": Array [], + "nativeEvents": [], + "networkMeasures": [], + "otherUserTimingMarks": [], "reactVersion": "", - "schedulingEvents": Array [ - Object { + "schedulingEvents": [ + { "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, - Object { + { "componentName": "App", "componentStack": " in App (at **)", @@ -2426,10 +2426,10 @@ describe('Timeline profiler', () => { }, ], "snapshotHeight": 0, - "snapshots": Array [], + "snapshots": [], "startTime": -10, - "suspenseEvents": Array [], - "thrownErrors": Array [], + "suspenseEvents": [], + "thrownErrors": [], } `); }); diff --git a/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js b/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js index 05966356e51a..b93aa4916357 100644 --- a/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js @@ -89,12 +89,12 @@ describe('Profiler change descriptions', () => { expect(element.hocDisplayNames).toBeNull(); expect(commitData.changeDescriptions.get(element.id)) .toMatchInlineSnapshot(` - Object { + { "context": true, "didHooksChange": false, "hooks": null, "isFirstMount": false, - "props": Array [], + "props": [], "state": null, } `); @@ -109,12 +109,12 @@ describe('Profiler change descriptions', () => { expect(element.hocDisplayNames).toBeNull(); expect(commitData.changeDescriptions.get(element.id)) .toMatchInlineSnapshot(` - Object { + { "context": true, "didHooksChange": false, "hooks": null, "isFirstMount": false, - "props": Array [], + "props": [], "state": null, } `); @@ -124,12 +124,12 @@ describe('Profiler change descriptions', () => { expect(element.hocDisplayNames).toEqual(['ForwardRef']); expect(commitData.changeDescriptions.get(element.id)) .toMatchInlineSnapshot(` - Object { + { "context": null, "didHooksChange": false, "hooks": null, "isFirstMount": false, - "props": Array [], + "props": [], "state": null, } `); @@ -139,12 +139,12 @@ describe('Profiler change descriptions', () => { expect(element.hocDisplayNames).toBeNull(); expect(commitData.changeDescriptions.get(element.id)) .toMatchInlineSnapshot(` - Object { + { "context": true, "didHooksChange": false, "hooks": null, "isFirstMount": false, - "props": Array [], + "props": [], "state": null, } `); diff --git a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js index 4c6b0ad95440..fcc4de34eafc 100644 --- a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js @@ -73,7 +73,7 @@ describe('ProfilerStore', () => { const fauxProfilingData = { dataForRoots: new Map(), }; - spyOn(console, 'warn'); + jest.spyOn(console, 'warn').mockImplementation(() => {}); store.profilerStore.profilingData = fauxProfilingData; expect(store.profilerStore.profilingData).not.toBe(fauxProfilingData); expect(console.warn).toHaveBeenCalledTimes(1); diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js index dbee76a5ce3f..d8d0690aa9c2 100644 --- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js @@ -267,35 +267,35 @@ describe('ProfilingCache', () => { expect(changeDescriptions).toHaveLength(5); expect(changeDescriptions[0]).toMatchInlineSnapshot(` Map { - 2 => Object { + 2 => { "context": null, "didHooksChange": false, "isFirstMount": true, "props": null, "state": null, }, - 4 => Object { + 4 => { "context": null, "didHooksChange": false, "isFirstMount": true, "props": null, "state": null, }, - 5 => Object { + 5 => { "context": null, "didHooksChange": false, "isFirstMount": true, "props": null, "state": null, }, - 6 => Object { + 6 => { "context": null, "didHooksChange": false, "isFirstMount": true, "props": null, "state": null, }, - 7 => Object { + 7 => { "context": null, "didHooksChange": false, "isFirstMount": true, @@ -306,51 +306,51 @@ describe('ProfilingCache', () => { `); expect(changeDescriptions[1]).toMatchInlineSnapshot(` Map { - 5 => Object { + 5 => { "context": null, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [ + "props": [ "count", ], "state": null, }, - 4 => Object { + 4 => { "context": true, "didHooksChange": false, "hooks": null, "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 7 => Object { + 7 => { "context": null, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [ + "props": [ "count", ], "state": null, }, - 6 => Object { - "context": Array [ + 6 => { + "context": [ "count", ], "didHooksChange": false, "hooks": null, "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 2 => Object { + 2 => { "context": null, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [], - "state": Array [ + "props": [], + "state": [ "count", ], }, @@ -358,140 +358,140 @@ describe('ProfilingCache', () => { `); expect(changeDescriptions[2]).toMatchInlineSnapshot(` Map { - 5 => Object { + 5 => { "context": null, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 4 => Object { + 4 => { "context": false, "didHooksChange": false, "hooks": null, "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 7 => Object { + 7 => { "context": null, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 6 => Object { - "context": Array [], + 6 => { + "context": [], "didHooksChange": false, "hooks": null, "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 2 => Object { + 2 => { "context": null, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [ + "props": [ "foo", ], - "state": Array [], + "state": [], }, } `); expect(changeDescriptions[3]).toMatchInlineSnapshot(` Map { - 5 => Object { + 5 => { "context": null, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 4 => Object { + 4 => { "context": false, "didHooksChange": false, "hooks": null, "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 7 => Object { + 7 => { "context": null, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 6 => Object { - "context": Array [], + 6 => { + "context": [], "didHooksChange": false, "hooks": null, "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 2 => Object { + 2 => { "context": null, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [ + "props": [ "foo", "bar", ], - "state": Array [], + "state": [], }, } `); expect(changeDescriptions[4]).toMatchInlineSnapshot(` Map { - 5 => Object { + 5 => { "context": null, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 4 => Object { + 4 => { "context": false, "didHooksChange": false, "hooks": null, "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 7 => Object { + 7 => { "context": null, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 6 => Object { - "context": Array [], + 6 => { + "context": [], "didHooksChange": false, "hooks": null, "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, - 2 => Object { + 2 => { "context": null, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [ + "props": [ "bar", ], - "state": Array [], + "state": [], }, } `); @@ -630,7 +630,7 @@ describe('ProfilingCache', () => { // 1st render: No change expect(changeDescriptions[0]).toMatchInlineSnapshot(` Map { - 3 => Object { + 3 => { "context": null, "didHooksChange": false, "isFirstMount": true, @@ -643,12 +643,12 @@ describe('ProfilingCache', () => { // 2nd render: Changed props expect(changeDescriptions[1]).toMatchInlineSnapshot(` Map { - 3 => Object { + 3 => { "context": false, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [ + "props": [ "count", ], "state": null, @@ -659,14 +659,14 @@ describe('ProfilingCache', () => { // 3rd render: Changed useReducer expect(changeDescriptions[2]).toMatchInlineSnapshot(` Map { - 3 => Object { + 3 => { "context": false, "didHooksChange": true, - "hooks": Array [ + "hooks": [ 1, ], "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, } @@ -675,14 +675,14 @@ describe('ProfilingCache', () => { // 4th render: Changed useState expect(changeDescriptions[3]).toMatchInlineSnapshot(` Map { - 3 => Object { + 3 => { "context": false, "didHooksChange": true, - "hooks": Array [ + "hooks": [ 0, ], "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, } @@ -691,12 +691,12 @@ describe('ProfilingCache', () => { // 5th render: Changed context expect(changeDescriptions[4]).toMatchInlineSnapshot(` Map { - 3 => Object { + 3 => { "context": true, "didHooksChange": false, - "hooks": Array [], + "hooks": [], "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, } @@ -705,14 +705,14 @@ describe('ProfilingCache', () => { // 6th render: Sync external store expect(changeDescriptions[5]).toMatchInlineSnapshot(` Map { - 3 => Object { + 3 => { "context": false, "didHooksChange": true, - "hooks": Array [ + "hooks": [ 2, ], "isFirstMount": false, - "props": Array [], + "props": [], "state": null, }, } @@ -901,25 +901,25 @@ describe('ProfilingCache', () => { } expect(allFiberCommits).toMatchInlineSnapshot(` - Array [ - Array [ + [ + [ 0, 1, 2, ], - Array [ + [ 0, 1, 2, ], - Array [ + [ 1, 2, ], - Array [ + [ 2, ], - Array [ + [ 0, ], ] @@ -949,8 +949,8 @@ describe('ProfilingCache', () => { const rootID = store.roots[0]; const commitData = store.profilerStore.getDataForRoot(rootID).commitData; expect(commitData).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "changeDescriptions": Map {}, "duration": 0, "effectDuration": null, @@ -965,8 +965,8 @@ describe('ProfilingCache', () => { "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, - "updaters": Array [ - Object { + "updaters": [ + { "displayName": "render()", "hocDisplayNames": null, "id": 1, diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js index 420d345f6866..d59d616d67e6 100644 --- a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js @@ -107,9 +107,9 @@ describe('profiling charts', () => { const firstCommitData = getFlamegraphChartData(rootID, 0); expect(firstCommitData.commitTree.nodes.size).toBe(5); expect(firstCommitData.chartData.rows).toMatchInlineSnapshot(` - Array [ - Array [ - Object { + [ + [ + { "actualDuration": 15, "didRender": true, "id": 2, @@ -120,32 +120,32 @@ describe('profiling charts', () => { "treeBaseDuration": 15, }, ], - Array [ - Object { + [ + { "actualDuration": 0, "didRender": true, "id": 5, - "label": "Memo(Child) key=\\"third\\" (<0.1ms of <0.1ms)", + "label": "Memo(Child) key="third" (<0.1ms of <0.1ms)", "name": "Memo(Child)", "offset": 15, "selfDuration": 0, "treeBaseDuration": 0, }, - Object { + { "actualDuration": 2, "didRender": true, "id": 4, - "label": "Memo(Child) key=\\"second\\" (2ms of 2ms)", + "label": "Memo(Child) key="second" (2ms of 2ms)", "name": "Memo(Child)", "offset": 13, "selfDuration": 2, "treeBaseDuration": 2, }, - Object { + { "actualDuration": 3, "didRender": true, "id": 3, - "label": "Memo(Child) key=\\"first\\" (3ms of 3ms)", + "label": "Memo(Child) key="first" (3ms of 3ms)", "name": "Memo(Child)", "offset": 10, "selfDuration": 3, @@ -158,9 +158,9 @@ describe('profiling charts', () => { const secondCommitData = getFlamegraphChartData(rootID, 1); expect(secondCommitData.commitTree.nodes.size).toBe(5); expect(secondCommitData.chartData.rows).toMatchInlineSnapshot(` - Array [ - Array [ - Object { + [ + [ + { "actualDuration": 10, "didRender": true, "id": 2, @@ -171,32 +171,32 @@ describe('profiling charts', () => { "treeBaseDuration": 15, }, ], - Array [ - Object { + [ + { "actualDuration": 0, "didRender": false, "id": 5, - "label": "Memo(Child) key=\\"third\\"", + "label": "Memo(Child) key="third"", "name": "Memo(Child)", "offset": 15, "selfDuration": 0, "treeBaseDuration": 0, }, - Object { + { "actualDuration": 0, "didRender": false, "id": 4, - "label": "Memo(Child) key=\\"second\\"", + "label": "Memo(Child) key="second"", "name": "Memo(Child)", "offset": 13, "selfDuration": 0, "treeBaseDuration": 2, }, - Object { + { "actualDuration": 0, "didRender": false, "id": 3, - "label": "Memo(Child) key=\\"first\\"", + "label": "Memo(Child) key="first"", "name": "Memo(Child)", "offset": 10, "selfDuration": 0, @@ -258,28 +258,28 @@ describe('profiling charts', () => { const firstCommitData = getRankedChartData(rootID, 0); expect(firstCommitData.commitTree.nodes.size).toBe(5); expect(firstCommitData.chartData.nodes).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "id": 2, "label": "Parent (10ms)", "name": "Parent", "value": 10, }, - Object { + { "id": 3, - "label": "Memo(Child) (Memo) key=\\"first\\" (3ms)", + "label": "Memo(Child) (Memo) key="first" (3ms)", "name": "Memo(Child)", "value": 3, }, - Object { + { "id": 4, - "label": "Memo(Child) (Memo) key=\\"second\\" (2ms)", + "label": "Memo(Child) (Memo) key="second" (2ms)", "name": "Memo(Child)", "value": 2, }, - Object { + { "id": 5, - "label": "Memo(Child) (Memo) key=\\"third\\" (<0.1ms)", + "label": "Memo(Child) (Memo) key="third" (<0.1ms)", "name": "Memo(Child)", "value": 0, }, @@ -290,8 +290,8 @@ describe('profiling charts', () => { const secondCommitData = getRankedChartData(rootID, 1); expect(secondCommitData.commitTree.nodes.size).toBe(5); expect(secondCommitData.chartData.nodes).toMatchInlineSnapshot(` - Array [ - Object { + [ + { "id": 2, "label": "Parent (10ms)", "name": "Parent", diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js index b5d777660306..9a21dfa4a7b6 100644 --- a/packages/react-devtools-shared/src/__tests__/setupTests.js +++ b/packages/react-devtools-shared/src/__tests__/setupTests.js @@ -32,8 +32,7 @@ if (compactConsole) { global.console = new CustomConsole(process.stdout, process.stderr, formatter); } -const env = jasmine.getEnv(); -env.beforeEach(() => { +beforeEach(() => { global.mockClipboardCopy = jest.fn(); // Test environment doesn't support document methods like execCommand() @@ -61,8 +60,14 @@ env.beforeEach(() => { // Use utils.js#withErrorsOrWarningsIgnored instead of directly mutating this array. global._ignoredErrorOrWarningMessages = []; function shouldIgnoreConsoleErrorOrWarn(args) { - const firstArg = args[0]; - if (typeof firstArg !== 'string') { + let firstArg = args[0]; + if ( + firstArg !== null && + typeof firstArg === 'object' && + String(firstArg).indexOf('Error: Uncaught [') === 0 + ) { + firstArg = String(firstArg); + } else if (typeof firstArg !== 'string') { return false; } const shouldFilter = global._ignoredErrorOrWarningMessages.some( @@ -163,7 +168,7 @@ env.beforeEach(() => { } global.fetch = mockFetch; }); -env.afterEach(() => { +afterEach(() => { delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__; // It's important to reset modules between test runs; diff --git a/packages/react-devtools-shared/src/__tests__/storeOwners-test.js b/packages/react-devtools-shared/src/__tests__/storeOwners-test.js index 5694da584023..df388f69a6c0 100644 --- a/packages/react-devtools-shared/src/__tests__/storeOwners-test.js +++ b/packages/react-devtools-shared/src/__tests__/storeOwners-test.js @@ -94,16 +94,16 @@ describe('Store owners list', () => { const rootID = store.getElementIDAtIndex(0); expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(` " ▾ - ▾ + ▾ - " + " `); const intermediateID = store.getElementIDAtIndex(1); expect(getFormattedOwnersList(intermediateID)).toMatchInlineSnapshot(` - " ▾ - - ▾ " + " ▾ + + ▾ " `); }); @@ -217,9 +217,9 @@ describe('Store owners list', () => { `); expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(` " ▾ - - - " + + + " `); act(() => legacyRender(, container)); @@ -232,9 +232,9 @@ describe('Store owners list', () => { `); expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(` " ▾ - - - " + + + " `); }); }); diff --git a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js index 439206673487..afeeaf9db839 100644 --- a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js +++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js @@ -259,61 +259,61 @@ describe('StoreStressConcurrent', () => { } expect(snapshots).toMatchInlineSnapshot(` - Array [ + [ "[root] ▾ - ", + ", "[root] ▾ - ", + ", "[root] ▾ - ", + ", "[root] ▾ - ", + ", "[root] ▾ - ", + ", "[root] ▾ - ", + ", "[root] ▾ - ", + ", "[root] ▾ - ", + ", "[root] ▾ - ", + ", "[root] ▾ - ", + ", "[root] ▾ - - ", + + ", "[root] ▾ - - ", + + ", "[root] ▾ - - ", + + ", "[root] ▾ - - ", + + ", "[root] ▾ - - ", + + ", "[root] ▾ - - ", + + ", ] `); @@ -430,68 +430,68 @@ describe('StoreStressConcurrent', () => { } expect(snapshots).toMatchInlineSnapshot(` - Array [ + [ "[root] ▾ ▾ - + ", "[root] ▾ ▾ - + ", "[root] ▾ ▾ - - - + + + ", "[root] ▾ ▾ - - - + + + ", "[root] ▾ ▾ - - + + ", "[root] ▾ ▾ - - + + ", "[root] ▾ ▾ - - + + ", "[root] ▾ ▾ - - + + ", "[root] ▾ ▾ - + ", "[root] ▾ @@ -502,13 +502,13 @@ describe('StoreStressConcurrent', () => { ▾ ▾ - + ", "[root] ▾ ▾ - + ", ] `); @@ -950,13 +950,13 @@ describe('StoreStressConcurrent', () => { } expect(snapshots).toMatchInlineSnapshot(` - Array [ + [ "[root] ▾ ▾ ▾ - + ", "[root] @@ -964,7 +964,7 @@ describe('StoreStressConcurrent', () => { ▾ ▾ - + ", "[root] @@ -972,9 +972,9 @@ describe('StoreStressConcurrent', () => { ▾ ▾ - - - + + + ", "[root] @@ -982,9 +982,9 @@ describe('StoreStressConcurrent', () => { ▾ ▾ - - - + + + ", "[root] @@ -992,8 +992,8 @@ describe('StoreStressConcurrent', () => { ▾ ▾ - - + + ", "[root] @@ -1001,8 +1001,8 @@ describe('StoreStressConcurrent', () => { ▾ ▾ - - + + ", "[root] @@ -1010,8 +1010,8 @@ describe('StoreStressConcurrent', () => { ▾ ▾ - - + + ", "[root] @@ -1019,8 +1019,8 @@ describe('StoreStressConcurrent', () => { ▾ ▾ - - + + ", "[root] @@ -1028,7 +1028,7 @@ describe('StoreStressConcurrent', () => { ▾ ▾ - + ", "[root] @@ -1043,7 +1043,7 @@ describe('StoreStressConcurrent', () => { ▾ ▾ - + ", "[root] @@ -1051,7 +1051,7 @@ describe('StoreStressConcurrent', () => { ▾ ▾ - + ", ] diff --git a/packages/react-devtools-shared/src/backend/StyleX/__tests__/utils-test.js b/packages/react-devtools-shared/src/backend/StyleX/__tests__/utils-test.js index 4aaf3ec42b20..00d587ec048c 100644 --- a/packages/react-devtools-shared/src/backend/StyleX/__tests__/utils-test.js +++ b/packages/react-devtools-shared/src/backend/StyleX/__tests__/utils-test.js @@ -35,30 +35,30 @@ describe('Stylex plugin utils', () => { it('should gracefully handle empty values', () => { expect(getStyleXData(null)).toMatchInlineSnapshot(` - Object { - "resolvedStyles": Object {}, - "sources": Array [], + { + "resolvedStyles": {}, + "sources": [], } `); expect(getStyleXData(undefined)).toMatchInlineSnapshot(` - Object { - "resolvedStyles": Object {}, - "sources": Array [], + { + "resolvedStyles": {}, + "sources": [], } `); expect(getStyleXData('')).toMatchInlineSnapshot(` - Object { - "resolvedStyles": Object {}, - "sources": Array [], + { + "resolvedStyles": {}, + "sources": [], } `); expect(getStyleXData([undefined])).toMatchInlineSnapshot(` - Object { - "resolvedStyles": Object {}, - "sources": Array [], + { + "resolvedStyles": {}, + "sources": [], } `); }); @@ -87,13 +87,13 @@ describe('Stylex plugin utils', () => { alignItems: 'bar', }), ).toMatchInlineSnapshot(` - Object { - "resolvedStyles": Object { + { + "resolvedStyles": { "alignItems": "center", "display": "flex", "flexDirection": "center", }, - "sources": Array [ + "sources": [ "Example__style", ], } @@ -123,13 +123,13 @@ describe('Stylex plugin utils', () => { }, ]), ).toMatchInlineSnapshot(` - Object { - "resolvedStyles": Object { + { + "resolvedStyles": { "alignItems": "center", "display": "flex", "flexDirection": "center", }, - "sources": Array [ + "sources": [ "Example1__style", "Example2__style", ], @@ -164,13 +164,13 @@ describe('Stylex plugin utils', () => { false, ]), ).toMatchInlineSnapshot(` - Object { - "resolvedStyles": Object { + { + "resolvedStyles": { "alignItems": "center", "display": "flex", "flexDirection": "center", }, - "sources": Array [ + "sources": [ "Example1__style", "Example2__style", ], @@ -204,15 +204,15 @@ describe('Stylex plugin utils', () => { }, }), ).toMatchInlineSnapshot(` - Object { - "resolvedStyles": Object { - ":hover": Object { + { + "resolvedStyles": { + ":hover": { "color": "blue", "textDecoration": "none", }, "color": "black", }, - "sources": Array [ + "sources": [ "Example__style", ], } @@ -244,13 +244,13 @@ describe('Stylex plugin utils', () => { false, ]), ).toMatchInlineSnapshot(` - Object { - "resolvedStyles": Object { + { + "resolvedStyles": { "alignItems": "center", "display": "flex", "flexDirection": "center", }, - "sources": Array [ + "sources": [ "Example1__style", "Example2__style", "Example3__style", diff --git a/packages/react-devtools-shared/src/hooks/__tests__/generateHookMap-test.js b/packages/react-devtools-shared/src/hooks/__tests__/generateHookMap-test.js index 0871d2301ef9..b1170814e526 100644 --- a/packages/react-devtools-shared/src/hooks/__tests__/generateHookMap-test.js +++ b/packages/react-devtools-shared/src/hooks/__tests__/generateHookMap-test.js @@ -70,9 +70,9 @@ export function Component() { const encodedHookMap = generateEncodedHookMap(parsed); expect(encodedHookMap).toMatchInlineSnapshot(` - Object { + { "mappings": "CAAD;KYCA,AgBDA;MREA,AWFA;SnBGA,AaHA,AMIA,AaJA;WpBKA,AiCLA;Y7CMA,AYNA", - "names": Array [ + "names": [ "", "a", "b", @@ -115,9 +115,9 @@ export function Component() { const encodedHookMap = generateEncodedHookMap(parsed); expect(encodedHookMap).toMatchInlineSnapshot(` - Object { + { "mappings": "CAAD;MgBCA,AUDA;OFEA,AUFA", - "names": Array [ + "names": [ "", "theme", "val", @@ -158,9 +158,9 @@ export function Component() { const encodedHookMap = generateEncodedHookMap(parsed); expect(encodedHookMap).toMatchInlineSnapshot(` - Object { + { "mappings": "CAAD;KyBCA;MKCA,AWDA;SrCDA", - "names": Array [ + "names": [ "", "InnerComponent", "state", @@ -200,9 +200,9 @@ export function Component() { const encodedHookMap = generateEncodedHookMap(parsed); expect(encodedHookMap).toMatchInlineSnapshot(` - Object { + { "mappings": "CAAD;MwBCA,AWDA", - "names": Array [ + "names": [ "", "val", ], diff --git a/packages/react-devtools-timeline/src/content-views/utils/__tests__/colors-test.js b/packages/react-devtools-timeline/src/content-views/utils/__tests__/colors-test.js index ccfb3cee4bd5..517cd3b66fee 100644 --- a/packages/react-devtools-timeline/src/content-views/utils/__tests__/colors-test.js +++ b/packages/react-devtools-timeline/src/content-views/utils/__tests__/colors-test.js @@ -41,7 +41,7 @@ describe(ColorGenerator, () => { describe(ColorGenerator.prototype.colorForID, () => { it('should generate a color for an ID', () => { expect(new ColorGenerator().colorForID('123')).toMatchInlineSnapshot(` - Object { + { "a": 1, "h": 190, "l": 80, diff --git a/packages/react-devtools-timeline/src/view-base/utils/__tests__/scrollState-test.js b/packages/react-devtools-timeline/src/view-base/utils/__tests__/scrollState-test.js index 306caffa6076..0241ea3f14a5 100644 --- a/packages/react-devtools-timeline/src/view-base/utils/__tests__/scrollState-test.js +++ b/packages/react-devtools-timeline/src/view-base/utils/__tests__/scrollState-test.js @@ -210,7 +210,7 @@ describe(zoomState, () => { }); expect(zoomedState).toMatchInlineSnapshot(` - Object { + { "length": 200, "offset": -50, } @@ -232,7 +232,7 @@ describe(moveStateToRange, () => { }); expect(movedState).toMatchInlineSnapshot(` - Object { + { "length": 400, "offset": -50, } diff --git a/packages/react-dom/src/__tests__/InvalidEventListeners-test.js b/packages/react-dom/src/__tests__/InvalidEventListeners-test.js index 9d6552a19946..c5df3e1196ff 100644 --- a/packages/react-dom/src/__tests__/InvalidEventListeners-test.js +++ b/packages/react-dom/src/__tests__/InvalidEventListeners-test.js @@ -65,9 +65,14 @@ describe('InvalidEventListeners', () => { if (!__DEV__) { expect(console.error).toHaveBeenCalledTimes(1); - expect(console.error.calls.argsFor(0)[0]).toMatch( - 'Expected `onClick` listener to be a function, ' + - 'instead got a value of `string` type.', + expect(console.error.mock.calls[0][0]).toEqual( + expect.objectContaining({ + detail: expect.objectContaining({ + message: + 'Expected `onClick` listener to be a function, instead got a value of `string` type.', + }), + type: 'unhandled exception', + }), ); } }); diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js index b474103f97ad..e0fe178d2fe8 100644 --- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js @@ -24,6 +24,10 @@ describe('ReactDOMComponent', () => { ReactTestUtils = require('react-dom/test-utils'); }); + afterEach(() => { + jest.restoreAllMocks(); + }); + describe('updateDOM', () => { it('should handle className', () => { const container = document.createElement('div'); @@ -1239,7 +1243,7 @@ describe('ReactDOMComponent', () => { if (__DEV__) { expect(console.log).toHaveBeenCalledTimes(1); - expect(console.log.calls.argsFor(0)[0]).toContain('onError called'); + expect(console.log.mock.calls[0][0]).toContain('onError called'); } }); @@ -1464,7 +1468,7 @@ describe('ReactDOMComponent', () => { it('should support custom elements which extend native elements', () => { const container = document.createElement('div'); - spyOnDevAndProd(document, 'createElement').and.callThrough(); + spyOnDevAndProd(document, 'createElement'); ReactDOM.render(
, container); expect(document.createElement).toHaveBeenCalledWith('div', { is: 'custom-div', @@ -1496,8 +1500,8 @@ describe('ReactDOMComponent', () => { if (__DEV__) { expect(console.log).toHaveBeenCalledTimes(2); - expect(console.log.calls.argsFor(0)[0]).toContain('onError called'); - expect(console.log.calls.argsFor(1)[0]).toContain('onLoad called'); + expect(console.log.mock.calls[0][0]).toContain('onError called'); + expect(console.log.mock.calls[1][0]).toContain('onLoad called'); } }); diff --git a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js index 4e02de9f2ef8..03c4f97c4946 100644 --- a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js @@ -49,6 +49,7 @@ describe('ReactDOMConsoleErrorReporting', () => { afterEach(() => { document.body.removeChild(container); window.removeEventListener('error', windowOnError); + jest.restoreAllMocks(); }); describe('ReactDOMClient.createRoot', () => { @@ -95,20 +96,24 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported because we're in a browser click event: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ // This one is jsdom-only. Real browser deduplicates it. // (In DEV, we have a nested event due to guarded callback.) - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], ]); @@ -121,12 +126,14 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported because we're in a browser click event: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], ]); @@ -134,14 +141,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); @@ -175,20 +182,24 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported due to the guarded callback: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ // This is only duplicated with createRoot // because it retries once with a sync render. - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ @@ -202,7 +213,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -214,14 +225,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); @@ -257,20 +268,24 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by jsdom due to the guarded callback: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ // This is only duplicated with createRoot // because it retries once with a sync render. - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ @@ -284,7 +299,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -296,14 +311,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); @@ -333,12 +348,14 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported due to the guarded callback: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ @@ -352,7 +369,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -364,14 +381,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); @@ -403,12 +420,14 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by jsdom due to the guarded callback: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ @@ -422,7 +441,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -434,14 +453,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); @@ -471,12 +490,14 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported due to the guarded callback: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ @@ -490,7 +511,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -502,14 +523,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); @@ -541,12 +562,14 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by jsdom due to the guarded callback: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ @@ -560,7 +583,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -572,14 +595,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { root.render(); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([]); + expect(console.error.mock.calls).toEqual([]); } }); }); @@ -627,21 +650,25 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported because we're in a browser click event: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ // This one is jsdom-only. Real browser deduplicates it. // (In DEV, we have a nested event due to guarded callback.) - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], ]); @@ -654,12 +681,14 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported because we're in a browser click event: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], ]); @@ -667,14 +696,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } @@ -702,13 +731,15 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported due to the guarded callback: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ @@ -722,7 +753,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -734,14 +765,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } @@ -772,13 +803,15 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported by jsdom due to the guarded callback: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ @@ -792,7 +825,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -804,14 +837,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } @@ -842,13 +875,15 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported due to the guarded callback: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ @@ -862,7 +897,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -874,14 +909,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } @@ -915,13 +950,15 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported by jsdom due to the guarded callback: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ @@ -935,7 +972,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -947,14 +984,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } @@ -985,13 +1022,15 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported due to the guarded callback: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ @@ -1005,7 +1044,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -1017,14 +1056,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } @@ -1058,13 +1097,15 @@ describe('ReactDOMConsoleErrorReporting', () => { }), ], ]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], [ // Reported by jsdom due to the guarded callback: - expect.stringContaining('Error: Uncaught [Error: Boom]'), expect.objectContaining({ - message: 'Boom', + detail: expect.objectContaining({ + message: 'Boom', + }), + type: 'unhandled exception', }), ], [ @@ -1078,7 +1119,7 @@ describe('ReactDOMConsoleErrorReporting', () => { // The top-level error was caught with try/catch, and there's no guarded callback, // so in production we don't see an error event. expect(windowOnError.mock.calls).toEqual([]); - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [ // Reported by React with no extra message: expect.objectContaining({ @@ -1090,14 +1131,14 @@ describe('ReactDOMConsoleErrorReporting', () => { // Check next render doesn't throw. windowOnError.mockReset(); - console.error.calls.reset(); + console.error.mockReset(); act(() => { ReactDOM.render(, container); }); expect(container.textContent).toBe('OK'); expect(windowOnError.mock.calls).toEqual([]); if (__DEV__) { - expect(console.error.calls.all().map(c => c.args)).toEqual([ + expect(console.error.mock.calls).toEqual([ [expect.stringContaining('ReactDOM.render is no longer supported')], ]); } diff --git a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js index e7238c07608c..23ca9525eec5 100644 --- a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js @@ -16,8 +16,8 @@ describe('ReactDOMEventListener', () => { beforeEach(() => { window.TextEvent = function () {}; jest.resetModules(); - React = require('react'); jest.isolateModules(() => { + React = require('react'); OuterReactDOM = require('react-dom'); }); jest.isolateModules(() => { diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js index b342cc946152..865337e8b547 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js @@ -24,6 +24,7 @@ describe('ReactDOMFiber', () => { afterEach(() => { document.body.removeChild(container); container = null; + jest.restoreAllMocks(); }); it('should render strings as children', () => { @@ -1154,11 +1155,11 @@ describe('ReactDOMFiber', () => { expect(ops).toEqual(['A']); if (__DEV__) { - expect(console.error.calls.count()).toBe(2); - expect(console.error.calls.argsFor(0)[0]).toMatch( + expect(console.error).toHaveBeenCalledTimes(2); + expect(console.error.mock.calls[0][0]).toMatch( 'ReactDOM.render is no longer supported in React 18', ); - expect(console.error.calls.argsFor(1)[0]).toMatch( + expect(console.error.mock.calls[1][0]).toMatch( 'ReactDOM.render is no longer supported in React 18', ); } @@ -1257,7 +1258,7 @@ describe('ReactDOMFiber', () => { let actualDocument; let textNode; - spyOnDevAndProd(iframeContainer, 'appendChild').and.callFake(node => { + spyOnDevAndProd(iframeContainer, 'appendChild').mockImplementation(node => { actualDocument = node.ownerDocument; textNode = node; }); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index a21e1d593cab..a22de285a656 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -5,6 +5,7 @@ * LICENSE file in the root directory of this source tree. * * @emails react-core + * @jest-environment ./scripts/jest/ReactDOMServerIntegrationEnvironment */ 'use strict'; @@ -38,10 +39,19 @@ let hasErrored = false; let fatalError = undefined; let renderOptions; +function resetJSDOM(markup) { + // Test Environment + const jsdom = new JSDOM(markup, { + runScripts: 'dangerously', + }); + window = jsdom.window; + document = jsdom.window.document; +} + describe('ReactDOMFizzServer', () => { beforeEach(() => { jest.resetModules(); - JSDOM = require('jsdom').JSDOM; + ({JSDOM} = require('jsdom')); Scheduler = require('scheduler'); React = require('react'); ReactDOMClient = require('react-dom/client'); @@ -71,15 +81,7 @@ describe('ReactDOMFizzServer', () => { textCache = new Map(); - // Test Environment - const jsdom = new JSDOM( - '
', - { - runScripts: 'dangerously', - }, - ); - window = jsdom.window; - document = jsdom.window.document; + resetJSDOM('
'); container = document.getElementById('container'); buffer = ''; @@ -168,12 +170,7 @@ describe('ReactDOMFizzServer', () => { // We also want to execute any scripts that are embedded. // We assume that we have now received a proper fragment of HTML. const bufferedContent = buffer; - // Test Environment - const jsdom = new JSDOM(bufferedContent, { - runScripts: 'dangerously', - }); - window = jsdom.window; - document = jsdom.window.document; + resetJSDOM(bufferedContent); container = document; buffer = ''; await withLoadingReadyState(async () => { @@ -1512,7 +1509,7 @@ describe('ReactDOMFizzServer', () => { function normalizeCodeLocInfo(str) { return ( str && - str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) { + String(str).replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function (m, name) { return '\n in ' + name + ' (at **)'; }) ); @@ -4964,12 +4961,7 @@ describe('ReactDOMFizzServer', () => { describe('title children', () => { function prepareJSDOMForTitle() { - // Test Environment - const jsdom = new JSDOM('\u0000', { - runScripts: 'dangerously', - }); - window = jsdom.window; - document = jsdom.window.document; + resetJSDOM('\u0000'); container = document.getElementsByTagName('head')[0]; } diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js index 338e51c22474..20f902de42d1 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js @@ -78,7 +78,7 @@ describe('ReactDOMFizzServerBrowser', () => { ); const result = await readResult(stream); expect(result).toMatchInlineSnapshot( - `"
hello world
"`, + `"
hello world
"`, ); }); @@ -205,9 +205,7 @@ describe('ReactDOMFizzServerBrowser', () => { const result = await readResult(stream); expect(result).toContain('Loading'); - expect(errors).toEqual([ - 'The render was aborted by the server without a reason.', - ]); + expect(errors).toEqual(['The operation was aborted.']); }); it('should reject if aborting before the shell is complete', async () => { @@ -228,10 +226,6 @@ describe('ReactDOMFizzServerBrowser', () => { await jest.runAllTimers(); const theReason = new Error('aborted for reasons'); - // @TODO this is a hack to work around lack of support for abortSignal.reason in node - // The abort call itself should set this property but since we are testing in node we - // set it here manually - controller.signal.reason = theReason; controller.abort(theReason); let caughtError = null; @@ -273,22 +267,14 @@ describe('ReactDOMFizzServerBrowser', () => { } catch (error) { caughtError = error; } - expect(caughtError.message).toBe( - 'The render was aborted by the server without a reason.', - ); - expect(errors).toEqual([ - 'The render was aborted by the server without a reason.', - ]); + expect(caughtError.message).toBe('The operation was aborted.'); + expect(errors).toEqual(['The operation was aborted.']); }); it('should reject if passing an already aborted signal', async () => { const errors = []; const controller = new AbortController(); const theReason = new Error('aborted for reasons'); - // @TODO this is a hack to work around lack of support for abortSignal.reason in node - // The abort call itself should set this property but since we are testing in node we - // set it here manually - controller.signal.reason = theReason; controller.abort(theReason); const promise = ReactDOMFizzServer.renderToReadableStream( @@ -436,10 +422,6 @@ describe('ReactDOMFizzServerBrowser', () => { }, }); - // @TODO this is a hack to work around lack of support for abortSignal.reason in node - // The abort call itself should set this property but since we are testing in node we - // set it here manually - controller.signal.reason = 'foobar'; controller.abort('foobar'); expect(errors).toEqual(['foobar', 'foobar']); @@ -477,10 +459,6 @@ describe('ReactDOMFizzServerBrowser', () => { }, }); - // @TODO this is a hack to work around lack of support for abortSignal.reason in node - // The abort call itself should set this property but since we are testing in node we - // set it here manually - controller.signal.reason = new Error('uh oh'); controller.abort(new Error('uh oh')); expect(errors).toEqual(['uh oh', 'uh oh']); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js index a5b2b5ac417a..594da3e2ec3f 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js @@ -91,7 +91,7 @@ describe('ReactDOMFizzServerNode', () => { pipe(writable); jest.runAllTimers(); expect(output.result).toMatchInlineSnapshot( - `"
hello world
"`, + `"
hello world
"`, ); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js index d0be8769abfd..f68b21a7613f 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js @@ -5,6 +5,7 @@ * LICENSE file in the root directory of this source tree. * * @emails react-core + * @jest-environment ./scripts/jest/ReactDOMServerIntegrationEnvironment */ let JSDOM; @@ -26,7 +27,7 @@ let textCache; describe('ReactDOMFizzShellHydration', () => { beforeEach(() => { jest.resetModules(); - JSDOM = require('jsdom').JSDOM; + ({JSDOM} = require('jsdom')); React = require('react'); ReactDOMClient = require('react-dom/client'); Scheduler = require('scheduler'); @@ -62,6 +63,10 @@ describe('ReactDOMFizzShellHydration', () => { }); }); + afterEach(() => { + jest.restoreAllMocks(); + }); + async function serverAct(callback) { await callback(); // Await one turn around the event loop. @@ -285,7 +290,7 @@ describe('ReactDOMFizzShellHydration', () => { }); test('TODO: A large component stack causes SSR to stack overflow', async () => { - spyOnDevAndProd(console, 'error'); + spyOnDevAndProd(console, 'error').mockImplementation(() => {}); function NestedComponent({depth}: {depth: number}) { if (depth <= 0) { @@ -301,7 +306,7 @@ describe('ReactDOMFizzShellHydration', () => { ); }); expect(console.error).toHaveBeenCalledTimes(1); - expect(console.error.calls.argsFor(0)[0].toString()).toBe( + expect(console.error.mock.calls[0][0].toString()).toBe( 'RangeError: Maximum call stack size exceeded', ); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js index 025a3144601a..c51fb5a120d6 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js @@ -5,6 +5,7 @@ * LICENSE file in the root directory of this source tree. * * @emails react-core + * @jest-environment ./scripts/jest/ReactDOMServerIntegrationEnvironment */ 'use strict'; @@ -26,7 +27,7 @@ let fatalError = undefined; describe('ReactDOMFizzStatic', () => { beforeEach(() => { jest.resetModules(); - JSDOM = require('jsdom').JSDOM; + ({JSDOM} = require('jsdom')); React = require('react'); ReactDOMClient = require('react-dom/client'); if (__EXPERIMENTAL__) { diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js index 43fe7ec09b78..13b96d893d38 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js @@ -78,7 +78,7 @@ describe('ReactDOMFizzStaticBrowser', () => { }); const prelude = await readContent(result.prelude); expect(prelude).toMatchInlineSnapshot( - `"
hello world
"`, + `"
hello world
"`, ); }); @@ -208,9 +208,7 @@ describe('ReactDOMFizzStaticBrowser', () => { const prelude = await readContent(result.prelude); expect(prelude).toContain('Loading'); - expect(errors).toEqual([ - 'The render was aborted by the server without a reason.', - ]); + expect(errors).toEqual(['The operation was aborted.']); }); // @gate experimental @@ -232,10 +230,6 @@ describe('ReactDOMFizzStaticBrowser', () => { await jest.runAllTimers(); const theReason = new Error('aborted for reasons'); - // @TODO this is a hack to work around lack of support for abortSignal.reason in node - // The abort call itself should set this property but since we are testing in node we - // set it here manually - controller.signal.reason = theReason; controller.abort(theReason); let caughtError = null; @@ -278,12 +272,8 @@ describe('ReactDOMFizzStaticBrowser', () => { } catch (error) { caughtError = error; } - expect(caughtError.message).toBe( - 'The render was aborted by the server without a reason.', - ); - expect(errors).toEqual([ - 'The render was aborted by the server without a reason.', - ]); + expect(caughtError.message).toBe('The operation was aborted.'); + expect(errors).toEqual(['The operation was aborted.']); }); // @gate experimental @@ -291,10 +281,6 @@ describe('ReactDOMFizzStaticBrowser', () => { const errors = []; const controller = new AbortController(); const theReason = new Error('aborted for reasons'); - // @TODO this is a hack to work around lack of support for abortSignal.reason in node - // The abort call itself should set this property but since we are testing in node we - // set it here manually - controller.signal.reason = theReason; controller.abort(theReason); const promise = ReactDOMFizzStatic.prerender( @@ -356,10 +342,6 @@ describe('ReactDOMFizzStaticBrowser', () => { }, }); - // @TODO this is a hack to work around lack of support for abortSignal.reason in node - // The abort call itself should set this property but since we are testing in node we - // set it here manually - controller.signal.reason = 'foobar'; controller.abort('foobar'); await resultPromise; @@ -400,10 +382,6 @@ describe('ReactDOMFizzStaticBrowser', () => { }, }); - // @TODO this is a hack to work around lack of support for abortSignal.reason in node - // The abort call itself should set this property but since we are testing in node we - // set it here manually - controller.signal.reason = new Error('uh oh'); controller.abort(new Error('uh oh')); await resultPromise; diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js index 64b14ef79359..5f77638f8c6e 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js @@ -5,11 +5,9 @@ * LICENSE file in the root directory of this source tree. * * @emails react-core + * @jest-environment node */ -// TODO: This should actually run in `@jest-environment node` but we currently -// run an old jest that doesn't support AbortController so we use DOM for now. - 'use strict'; let React; @@ -22,6 +20,8 @@ describe('ReactDOMFizzStaticNode', () => { React = require('react'); if (__EXPERIMENTAL__) { ReactDOMFizzStatic = require('react-dom/static'); + global.AbortController = + require('abortcontroller-polyfill/dist/cjs-ponyfill').AbortController; } Suspense = React.Suspense; }); @@ -82,7 +82,7 @@ describe('ReactDOMFizzStaticNode', () => { ); const prelude = await readContent(result.prelude); expect(prelude).toMatchInlineSnapshot( - `"
hello world
"`, + `"
hello world
"`, ); }); @@ -212,9 +212,7 @@ describe('ReactDOMFizzStaticNode', () => { const prelude = await readContent(result.prelude); expect(prelude).toContain('Loading'); - expect(errors).toEqual([ - 'The render was aborted by the server without a reason.', - ]); + expect(errors).toEqual(['This operation was aborted']); }); // @gate experimental @@ -236,10 +234,6 @@ describe('ReactDOMFizzStaticNode', () => { await jest.runAllTimers(); const theReason = new Error('aborted for reasons'); - // @TODO this is a hack to work around lack of support for abortSignal.reason in node - // The abort call itself should set this property but since we are testing in node we - // set it here manually - controller.signal.reason = theReason; controller.abort(theReason); let caughtError = null; @@ -282,12 +276,8 @@ describe('ReactDOMFizzStaticNode', () => { } catch (error) { caughtError = error; } - expect(caughtError.message).toBe( - 'The render was aborted by the server without a reason.', - ); - expect(errors).toEqual([ - 'The render was aborted by the server without a reason.', - ]); + expect(caughtError.message).toBe('This operation was aborted'); + expect(errors).toEqual(['This operation was aborted']); }); // @gate experimental @@ -295,10 +285,6 @@ describe('ReactDOMFizzStaticNode', () => { const errors = []; const controller = new AbortController(); const theReason = new Error('aborted for reasons'); - // @TODO this is a hack to work around lack of support for abortSignal.reason in node - // The abort call itself should set this property but since we are testing in node we - // set it here manually - controller.signal.reason = theReason; controller.abort(theReason); const promise = ReactDOMFizzStatic.prerenderToNodeStreams( @@ -362,10 +348,6 @@ describe('ReactDOMFizzStaticNode', () => { await jest.runAllTimers(); - // @TODO this is a hack to work around lack of support for abortSignal.reason in node - // The abort call itself should set this property but since we are testing in node we - // set it here manually - controller.signal.reason = 'foobar'; controller.abort('foobar'); await resultPromise; @@ -408,10 +390,6 @@ describe('ReactDOMFizzStaticNode', () => { await jest.runAllTimers(); - // @TODO this is a hack to work around lack of support for abortSignal.reason in node - // The abort call itself should set this property but since we are testing in node we - // set it here manually - controller.signal.reason = new Error('uh oh'); controller.abort(new Error('uh oh')); await resultPromise; diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js index e2b0fbb86f6f..389db11294ca 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js @@ -5,6 +5,7 @@ * LICENSE file in the root directory of this source tree. * * @emails react-core + * @jest-environment ./scripts/jest/ReactDOMServerIntegrationEnvironment */ 'use strict'; @@ -25,7 +26,7 @@ let fatalError = undefined; describe('ReactDOMFizzServerHydrationWarning', () => { beforeEach(() => { jest.resetModules(); - JSDOM = require('jsdom').JSDOM; + ({JSDOM} = require('jsdom')); Scheduler = require('scheduler'); React = require('react'); ReactDOMClient = require('react-dom/client'); diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index cdc271f87999..c549df7b23b4 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -5,6 +5,7 @@ * LICENSE file in the root directory of this source tree. * * @emails react-core + * @jest-environment ./scripts/jest/ReactDOMServerIntegrationEnvironment */ 'use strict'; @@ -23,6 +24,7 @@ let ReactDOMClient; let ReactDOMFizzServer; let Suspense; let textCache; +let window; let document; let writable; const CSPnonce = null; @@ -32,10 +34,19 @@ let hasErrored = false; let fatalError = undefined; let renderOptions; +function resetJSDOM(markup) { + // Test Environment + const jsdom = new JSDOM(markup, { + runScripts: 'dangerously', + }); + window = jsdom.window; + document = jsdom.window.document; +} + describe('ReactDOMFloat', () => { beforeEach(() => { jest.resetModules(); - JSDOM = require('jsdom').JSDOM; + ({JSDOM} = require('jsdom')); Scheduler = require('scheduler'); React = require('react'); ReactDOM = require('react-dom'); @@ -46,14 +57,7 @@ describe('ReactDOMFloat', () => { textCache = new Map(); - // Test Environment - const jsdom = new JSDOM( - '
', - { - runScripts: 'dangerously', - }, - ); - document = jsdom.window.document; + resetJSDOM('
'); container = document.getElementById('container'); buffer = ''; @@ -137,15 +141,11 @@ describe('ReactDOMFloat', () => { // We also want to execute any scripts that are embedded. // We assume that we have now received a proper fragment of HTML. const bufferedContent = buffer; - // Test Environment - const jsdom = new JSDOM(bufferedContent, { - runScripts: 'dangerously', - }); - document = jsdom.window.document; + resetJSDOM(bufferedContent); container = document; buffer = ''; await withLoadingReadyState(async () => { - await replaceScriptsAndMove(jsdom.window, null, document.documentElement); + await replaceScriptsAndMove(window, null, document.documentElement); }, document); } diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js index 65a3936987b1..bd34fbb20ce5 100644 --- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js @@ -3,6 +3,8 @@ * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. + * + * @jest-environment ./scripts/jest/ReactDOMServerIntegrationEnvironment */ 'use strict'; @@ -49,7 +51,11 @@ describe('ReactDOMServerHydration', () => { if (format instanceof Error) { return 'Caught [' + format.message + ']'; } - if (format.indexOf('Error: Uncaught [') === 0) { + if ( + format !== null && + typeof format === 'object' && + String(format).indexOf('Error: Uncaught [') === 0 + ) { // Ignore errors captured by jsdom and their stacks. // We only want console errors in this suite. return null; @@ -85,8 +91,8 @@ describe('ReactDOMServerHydration', () => { } if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) { expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ - "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\" + [ + "Warning: Text content did not match. Server: "server" Client: "client" in main (at **) in div (at **) in Mismatch (at **)", @@ -97,8 +103,8 @@ describe('ReactDOMServerHydration', () => { `); } else { expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ - "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\" + [ + "Warning: Text content did not match. Server: "server" Client: "client" in main (at **) in div (at **) in Mismatch (at **)", @@ -124,8 +130,8 @@ describe('ReactDOMServerHydration', () => { ); } expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ - "Warning: Prop \`dangerouslySetInnerHTML\` did not match. Server: \\"server\\" Client: \\"client\\" + [ + "Warning: Prop \`dangerouslySetInnerHTML\` did not match. Server: "server" Client: "client" in main (at **) in div (at **) in Mismatch (at **)", @@ -148,8 +154,8 @@ describe('ReactDOMServerHydration', () => { ); } expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ - "Warning: Prop \`className\` did not match. Server: \\"child server\\" Client: \\"child client\\" + [ + "Warning: Prop \`className\` did not match. Server: "child server" Client: "child client" in main (at **) in div (at **) in Mismatch (at **)", @@ -171,8 +177,8 @@ describe('ReactDOMServerHydration', () => { ); } expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ - "Warning: Prop \`tabIndex\` did not match. Server: \\"null\\" Client: \\"1\\" + [ + "Warning: Prop \`tabIndex\` did not match. Server: "null" Client: "1" in main (at **) in div (at **) in Mismatch (at **)", @@ -194,7 +200,7 @@ describe('ReactDOMServerHydration', () => { ); } expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ + [ "Warning: Extra attributes from the server: tabindex,dir in main (at **) in div (at **) @@ -217,8 +223,8 @@ describe('ReactDOMServerHydration', () => { ); } expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ - "Warning: Prop \`tabIndex\` did not match. Server: \\"null\\" Client: \\"1\\" + [ + "Warning: Prop \`tabIndex\` did not match. Server: "null" Client: "1" in main (at **) in div (at **) in Mismatch (at **)", @@ -241,8 +247,8 @@ describe('ReactDOMServerHydration', () => { ); } expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ - "Warning: Prop \`style\` did not match. Server: \\"opacity:0\\" Client: \\"opacity:1\\" + [ + "Warning: Prop \`style\` did not match. Server: "opacity:0" Client: "opacity:1" in main (at **) in div (at **) in Mismatch (at **)", @@ -263,7 +269,7 @@ describe('ReactDOMServerHydration', () => { ); } expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ + [ "Warning: Expected server HTML to contain a matching
in
. in main (at **) in div (at **) @@ -287,7 +293,7 @@ describe('ReactDOMServerHydration', () => { ); } expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ + [ "Warning: Expected server HTML to contain a matching
in
. in header (at **) in div (at **) @@ -311,7 +317,7 @@ describe('ReactDOMServerHydration', () => { ); } expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ + [ "Warning: Expected server HTML to contain a matching
in
. in main (at **) in div (at **) @@ -335,7 +341,7 @@ describe('ReactDOMServerHydration', () => { ); } expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ + [ "Warning: Expected server HTML to contain a matching