\n-`;\n-\n-exports[`Store component filters should filter HOCs: 2: hide all HOCs 1`] = `\n-[root]\n- ▾ \n-

\n-`;\n-\n-exports[`Store component filters should filter HOCs: 3: disable HOC filter 1`] = `\n-[root]\n- ▾ [Bar][Foo]\n- ▾ [Foo]\n- ▾ \n-

\n-`;\n-\n-exports[`Store component filters should filter by display name: 1: mount 1`] = `\n-[root]\n- ▾ \n- \n- ▾ \n- \n- ▾ \n- \n-`;\n-\n-exports[`Store component filters should filter by display name: 2: filter \"Foo\" 1`] = `\n-[root]\n- \n- ▾ \n- \n- ▾ \n- \n-`;\n-\n-exports[`Store component filters should filter by display name: 3: filter \"Ba\" 1`] = `\n-[root]\n- ▾ \n- \n- \n- \n-`;\n-\n-exports[`Store component filters should filter by display name: 4: filter \"B.z\" 1`] = `\n-[root]\n- ▾ \n- \n- ▾ \n- \n- \n-`;\n-\n-exports[`Store component filters should filter by path: 1: mount 1`] = `\n-[root]\n- ▾ \n-

\n-`;\n-\n-exports[`Store component filters should filter by path: 2: hide all components declared within this test filed 1`] = `[root]`;\n-\n-exports[`Store component filters should filter by path: 3: hide components in a made up fake path 1`] = `\n-[root]\n- ▾ \n-

\n-`;\n-\n-exports[`Store component filters should ignore invalid ElementTypeRoot filter: 1: mount 1`] = `\n-[root]\n- ▾ \n-

\n-`;\n-\n-exports[`Store component filters should ignore invalid ElementTypeRoot filter: 2: add invalid filter 1`] = `\n-[root]\n- ▾ \n-

\n-`;\n-\n-exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 1: suspended 1`] = `\n-[root]\n- ▾ \n- ▾ \n-

\n-`;\n-\n-exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 2: resolved 1`] = `\n-[root]\n- ▾ \n- \n-`;\n-\n-exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 3: suspended 1`] = `\n-[root]\n- ▾ \n- ▾ \n-

\n-`;\n-\n-exports[`Store component filters should support filtering by element type: 1: mount 1`] = `\n-[root]\n- ▾ \n- ▾

\n- ▾ \n-

\n-`;\n-\n-exports[`Store component filters should support filtering by element type: 2: hide host components 1`] = `\n-[root]\n- ▾ \n- \n-`;\n-\n-exports[`Store component filters should support filtering by element type: 3: hide class components 1`] = `\n-[root]\n- ▾

\n- ▾ \n-

\n-`;\n-\n-exports[`Store component filters should support filtering by element type: 4: hide class and function components 1`] = `\n-[root]\n- ▾

\n-

\n-`;\n-\n-exports[`Store component filters should support filtering by element type: 5: disable all filters 1`] = `\n-[root]\n- ▾ \n- ▾

\n- ▾ \n-

\n-`;\ndiff --git a\/packages\/react-devtools-shared\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap b\/packages\/react-devtools-shared\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\ndeleted file mode 100644\nindex 1e72710e4b..0000000000\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\n+++ \/dev\/null\n@@ -1,1293 +0,0 @@\n-\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n-\n-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 0: mount 1`] = `\n-[root]\n- ▾ \n- ▾ \n- ▾ \n- ▾ \n- \n-`;\n-\n-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 1: initial state 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 5,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 2: child owners tree 1`] = `\n-Object {\n- \"inspectedElementID\": 4,\n- \"numElements\": 3,\n- \"ownerFlatTree\": Array [\n- Object {\n- \"children\": Array [\n- 5,\n- ],\n- \"depth\": 0,\n- \"displayName\": \"Child\",\n- \"hocDisplayNames\": null,\n- \"id\": 4,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 2,\n- \"parentID\": 3,\n- \"type\": 5,\n- \"weight\": 3,\n- },\n- Object {\n- \"children\": Array [\n- 6,\n- ],\n- \"depth\": 1,\n- \"displayName\": \"Suspense\",\n- \"hocDisplayNames\": null,\n- \"id\": 5,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 4,\n- \"parentID\": 4,\n- \"type\": 12,\n- \"weight\": 2,\n- },\n- Object {\n- \"children\": Array [],\n- \"depth\": 2,\n- \"displayName\": \"Grandchild\",\n- \"hocDisplayNames\": null,\n- \"id\": 6,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 4,\n- \"parentID\": 5,\n- \"type\": 5,\n- \"weight\": 1,\n- },\n- ],\n- \"ownerID\": 4,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 4,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 3: child owners tree 1`] = `\n-Object {\n- \"inspectedElementID\": 5,\n- \"numElements\": 3,\n- \"ownerFlatTree\": Array [\n- Object {\n- \"children\": Array [\n- 5,\n- ],\n- \"depth\": 0,\n- \"displayName\": \"Child\",\n- \"hocDisplayNames\": null,\n- \"id\": 4,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 2,\n- \"parentID\": 3,\n- \"type\": 5,\n- \"weight\": 3,\n- },\n- Object {\n- \"children\": Array [\n- 6,\n- ],\n- \"depth\": 1,\n- \"displayName\": \"Suspense\",\n- \"hocDisplayNames\": null,\n- \"id\": 5,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 4,\n- \"parentID\": 4,\n- \"type\": 12,\n- \"weight\": 2,\n- },\n- Object {\n- \"children\": Array [],\n- \"depth\": 2,\n- \"displayName\": \"Grandchild\",\n- \"hocDisplayNames\": null,\n- \"id\": 6,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 4,\n- \"parentID\": 5,\n- \"type\": 5,\n- \"weight\": 1,\n- },\n- ],\n- \"ownerID\": 4,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 5,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 4: main tree 1`] = `\n-Object {\n- \"inspectedElementID\": 5,\n- \"numElements\": 5,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 5,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 0: mount 1`] = `\n-[root]\n- ▾ \n- \n-`;\n-\n-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 1: initial state 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 2,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 2: child owners tree 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 1,\n- \"ownerFlatTree\": Array [\n- Object {\n- \"children\": Array [],\n- \"depth\": 0,\n- \"displayName\": \"Child\",\n- \"hocDisplayNames\": null,\n- \"id\": 3,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 0,\n- \"parentID\": 2,\n- \"type\": 5,\n- \"weight\": 1,\n- },\n- ],\n- \"ownerID\": 3,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 3: remove child 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 1,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 4: parent owners tree 1`] = `\n-Object {\n- \"inspectedElementID\": 2,\n- \"numElements\": 1,\n- \"ownerFlatTree\": Array [\n- Object {\n- \"children\": Array [],\n- \"depth\": 0,\n- \"displayName\": \"Parent\",\n- \"hocDisplayNames\": null,\n- \"id\": 2,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 0,\n- \"parentID\": 1,\n- \"type\": 5,\n- \"weight\": 1,\n- },\n- ],\n- \"ownerID\": 2,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 2,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 5: unmount root 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 0,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 0: mount 1`] = `\n-[root]\n- ▾ \n- ▾ \n- \n- \n-`;\n-\n-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 1: initial state 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 2: parent owners tree 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 3,\n- \"ownerFlatTree\": Array [\n- Object {\n- \"children\": Array [\n- 4,\n- 5,\n- ],\n- \"depth\": 0,\n- \"displayName\": \"Parent\",\n- \"hocDisplayNames\": null,\n- \"id\": 3,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 2,\n- \"parentID\": 2,\n- \"type\": 5,\n- \"weight\": 3,\n- },\n- Object {\n- \"children\": Array [],\n- \"depth\": 1,\n- \"displayName\": \"Child\",\n- \"hocDisplayNames\": null,\n- \"id\": 4,\n- \"isCollapsed\": false,\n- \"key\": \"0\",\n- \"ownerID\": 3,\n- \"parentID\": 3,\n- \"type\": 5,\n- \"weight\": 1,\n- },\n- Object {\n- \"children\": Array [],\n- \"depth\": 1,\n- \"displayName\": \"Child\",\n- \"hocDisplayNames\": null,\n- \"id\": 5,\n- \"isCollapsed\": false,\n- \"key\": \"1\",\n- \"ownerID\": 3,\n- \"parentID\": 3,\n- \"type\": 5,\n- \"weight\": 1,\n- },\n- ],\n- \"ownerID\": 3,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 3: remove second child 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 2,\n- \"ownerFlatTree\": Array [\n- Object {\n- \"children\": Array [\n- 4,\n- ],\n- \"depth\": 0,\n- \"displayName\": \"Parent\",\n- \"hocDisplayNames\": null,\n- \"id\": 3,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 2,\n- \"parentID\": 2,\n- \"type\": 5,\n- \"weight\": 2,\n- },\n- Object {\n- \"children\": Array [],\n- \"depth\": 1,\n- \"displayName\": \"Child\",\n- \"hocDisplayNames\": null,\n- \"id\": 4,\n- \"isCollapsed\": false,\n- \"key\": \"0\",\n- \"ownerID\": 3,\n- \"parentID\": 3,\n- \"type\": 5,\n- \"weight\": 1,\n- },\n- ],\n- \"ownerID\": 3,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 4: remove first child 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 1,\n- \"ownerFlatTree\": Array [\n- Object {\n- \"children\": Array [],\n- \"depth\": 0,\n- \"displayName\": \"Parent\",\n- \"hocDisplayNames\": null,\n- \"id\": 3,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 2,\n- \"parentID\": 2,\n- \"type\": 5,\n- \"weight\": 1,\n- },\n- ],\n- \"ownerID\": 3,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should support entering and existing the owners tree view: 0: mount 1`] = `\n-[root]\n- ▾ \n- ▾ \n- \n- \n-`;\n-\n-exports[`TreeListContext owners state should support entering and existing the owners tree view: 1: initial state 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should support entering and existing the owners tree view: 2: parent owners tree 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 3,\n- \"ownerFlatTree\": Array [\n- Object {\n- \"children\": Array [\n- 4,\n- 5,\n- ],\n- \"depth\": 0,\n- \"displayName\": \"Parent\",\n- \"hocDisplayNames\": null,\n- \"id\": 3,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 2,\n- \"parentID\": 2,\n- \"type\": 5,\n- \"weight\": 3,\n- },\n- Object {\n- \"children\": Array [],\n- \"depth\": 1,\n- \"displayName\": \"Child\",\n- \"hocDisplayNames\": null,\n- \"id\": 4,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 3,\n- \"parentID\": 3,\n- \"type\": 5,\n- \"weight\": 1,\n- },\n- Object {\n- \"children\": Array [],\n- \"depth\": 1,\n- \"displayName\": \"Child\",\n- \"hocDisplayNames\": null,\n- \"id\": 5,\n- \"isCollapsed\": false,\n- \"key\": null,\n- \"ownerID\": 3,\n- \"parentID\": 3,\n- \"type\": 5,\n- \"weight\": 1,\n- },\n- ],\n- \"ownerID\": 3,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext owners state should support entering and existing the owners tree view: 3: final state 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 0: mount 1`] = `\n-[root]\n- \n- \n-`;\n-\n-exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 1: initial state 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 2,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 2: search for \"ba\" 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 2,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 0,\n- \"searchResults\": Array [\n- 3,\n- ],\n- \"searchText\": \"ba\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 3: mount Baz 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 3,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 0,\n- \"searchResults\": Array [\n- 3,\n- 4,\n- ],\n- \"searchText\": \"ba\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext search state should find elements matching search text: 0: mount 1`] = `\n-[root]\n- \n- \n- \n- [withHOC]\n-`;\n-\n-exports[`TreeListContext search state should find elements matching search text: 1: initial state 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext search state should find elements matching search text: 2: search for \"ba\" 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 0,\n- \"searchResults\": Array [\n- 3,\n- 4,\n- ],\n- \"searchText\": \"ba\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext search state should find elements matching search text: 3: search for \"f\" 1`] = `\n-Object {\n- \"inspectedElementID\": 2,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 0,\n- \"searchResults\": Array [\n- 2,\n- ],\n- \"searchText\": \"f\",\n- \"selectedElementID\": 2,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext search state should find elements matching search text: 4: search for \"y\" 1`] = `\n-Object {\n- \"inspectedElementID\": 2,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"y\",\n- \"selectedElementID\": 2,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext search state should find elements matching search text: 5: search for \"w\" 1`] = `\n-Object {\n- \"inspectedElementID\": 5,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 0,\n- \"searchResults\": Array [\n- 5,\n- ],\n- \"searchText\": \"w\",\n- \"selectedElementID\": 5,\n- \"selectedElementIndex\": 3,\n-}\n-`;\n-\n-exports[`TreeListContext search state should remove unmounted elements from the search results set: 0: mount 1`] = `\n-[root]\n- \n- \n- \n-`;\n-\n-exports[`TreeListContext search state should remove unmounted elements from the search results set: 1: initial state 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 3,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext search state should remove unmounted elements from the search results set: 2: search for \"ba\" 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 3,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 0,\n- \"searchResults\": Array [\n- 3,\n- 4,\n- ],\n- \"searchText\": \"ba\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext search state should remove unmounted elements from the search results set: 3: go to second result 1`] = `\n-Object {\n- \"inspectedElementID\": 4,\n- \"numElements\": 3,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 1,\n- \"searchResults\": Array [\n- 3,\n- 4,\n- ],\n- \"searchText\": \"ba\",\n- \"selectedElementID\": 4,\n- \"selectedElementIndex\": 2,\n-}\n-`;\n-\n-exports[`TreeListContext search state should remove unmounted elements from the search results set: 4: unmount Baz 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 2,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 0,\n- \"searchResults\": Array [\n- 3,\n- ],\n- \"searchText\": \"ba\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext search state should select the next and previous items within the search results: 0: mount 1`] = `\n-[root]\n- \n- \n- \n- \n-`;\n-\n-exports[`TreeListContext search state should select the next and previous items within the search results: 1: initial state 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext search state should select the next and previous items within the search results: 2: search for \"ba\" 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 0,\n- \"searchResults\": Array [\n- 3,\n- 4,\n- 5,\n- ],\n- \"searchText\": \"ba\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext search state should select the next and previous items within the search results: 3: go to second result 1`] = `\n-Object {\n- \"inspectedElementID\": 4,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 1,\n- \"searchResults\": Array [\n- 3,\n- 4,\n- 5,\n- ],\n- \"searchText\": \"ba\",\n- \"selectedElementID\": 4,\n- \"selectedElementIndex\": 2,\n-}\n-`;\n-\n-exports[`TreeListContext search state should select the next and previous items within the search results: 4: go to third result 1`] = `\n-Object {\n- \"inspectedElementID\": 5,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 2,\n- \"searchResults\": Array [\n- 3,\n- 4,\n- 5,\n- ],\n- \"searchText\": \"ba\",\n- \"selectedElementID\": 5,\n- \"selectedElementIndex\": 3,\n-}\n-`;\n-\n-exports[`TreeListContext search state should select the next and previous items within the search results: 5: go to second result 1`] = `\n-Object {\n- \"inspectedElementID\": 4,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 1,\n- \"searchResults\": Array [\n- 3,\n- 4,\n- 5,\n- ],\n- \"searchText\": \"ba\",\n- \"selectedElementID\": 4,\n- \"selectedElementIndex\": 2,\n-}\n-`;\n-\n-exports[`TreeListContext search state should select the next and previous items within the search results: 6: go to first result 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 0,\n- \"searchResults\": Array [\n- 3,\n- 4,\n- 5,\n- ],\n- \"searchText\": \"ba\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext search state should select the next and previous items within the search results: 7: wrap to last result 1`] = `\n-Object {\n- \"inspectedElementID\": 5,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 2,\n- \"searchResults\": Array [\n- 3,\n- 4,\n- 5,\n- ],\n- \"searchText\": \"ba\",\n- \"selectedElementID\": 5,\n- \"selectedElementIndex\": 3,\n-}\n-`;\n-\n-exports[`TreeListContext search state should select the next and previous items within the search results: 8: wrap to first result 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": 0,\n- \"searchResults\": Array [\n- 3,\n- 4,\n- 5,\n- ],\n- \"searchText\": \"ba\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 0: mount 1`] = `\n-[root]\n- ▾ \n- ▾ \n- \n- \n-`;\n-\n-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 1: initial state 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 2: select second child 1`] = `\n-Object {\n- \"inspectedElementID\": 5,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 5,\n- \"selectedElementIndex\": 3,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 3: remove children (parent should now be selected) 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 2,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 4: unmount root (nothing should be selected) 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 0,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should navigate next\/previous sibling and skip over children in between: 0: mount 1`] = `\n-[root]\n- ▾ \n- ▾ \n- \n- ▾ \n- \n- \n- \n- ▾ \n- \n- \n-`;\n-\n-exports[`TreeListContext tree state should navigate the owner hierarchy: 0: mount 1`] = `\n-[root]\n- ▾ \n- ▾ \n- ▾ \n- \n- ▾ \n- ▾ \n- \n- \n- \n- ▾ \n- ▾ \n- \n- \n-`;\n-\n-exports[`TreeListContext tree state should select child elements: 0: mount 1`] = `\n-[root]\n- ▾ \n- ▾ \n- \n- \n- ▾ \n- \n- \n-`;\n-\n-exports[`TreeListContext tree state should select child elements: 1: initial state 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 7,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select child elements: 2: select first element 1`] = `\n-Object {\n- \"inspectedElementID\": 2,\n- \"numElements\": 7,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 2,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select child elements: 3: select Parent 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 7,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select child elements: 4: select Child 1`] = `\n-Object {\n- \"inspectedElementID\": 4,\n- \"numElements\": 7,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 4,\n- \"selectedElementIndex\": 2,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select parent elements and then collapse: 0: mount 1`] = `\n-[root]\n- ▾ \n- ▾ \n- \n- \n- ▾ \n- \n- \n-`;\n-\n-exports[`TreeListContext tree state should select parent elements and then collapse: 1: initial state 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 7,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select parent elements and then collapse: 2: select last child 1`] = `\n-Object {\n- \"inspectedElementID\": 8,\n- \"numElements\": 7,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 8,\n- \"selectedElementIndex\": 6,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select parent elements and then collapse: 3: select Parent 1`] = `\n-Object {\n- \"inspectedElementID\": 6,\n- \"numElements\": 7,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 6,\n- \"selectedElementIndex\": 4,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select parent elements and then collapse: 4: select Grandparent 1`] = `\n-Object {\n- \"inspectedElementID\": 2,\n- \"numElements\": 7,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 2,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select the next and previous elements in the tree: 0: mount 1`] = `\n-[root]\n- ▾ \n- ▾ \n- \n- \n-`;\n-\n-exports[`TreeListContext tree state should select the next and previous elements in the tree: 1: initial state 1`] = `\n-Object {\n- \"inspectedElementID\": null,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": null,\n- \"selectedElementIndex\": null,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select the next and previous elements in the tree: 2: select first element 1`] = `\n-Object {\n- \"inspectedElementID\": 2,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 2,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (0) 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (1) 1`] = `\n-Object {\n- \"inspectedElementID\": 4,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 4,\n- \"selectedElementIndex\": 2,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (2) 1`] = `\n-Object {\n- \"inspectedElementID\": 5,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 5,\n- \"selectedElementIndex\": 3,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (1) 1`] = `\n-Object {\n- \"inspectedElementID\": 2,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 2,\n- \"selectedElementIndex\": 0,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (2) 1`] = `\n-Object {\n- \"inspectedElementID\": 3,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 3,\n- \"selectedElementIndex\": 1,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (3) 1`] = `\n-Object {\n- \"inspectedElementID\": 4,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 4,\n- \"selectedElementIndex\": 2,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select the next and previous elements in the tree: 5: select previous wraps around to last 1`] = `\n-Object {\n- \"inspectedElementID\": 5,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 5,\n- \"selectedElementIndex\": 3,\n-}\n-`;\n-\n-exports[`TreeListContext tree state should select the next and previous elements in the tree: 6: select next wraps around to first 1`] = `\n-Object {\n- \"inspectedElementID\": 2,\n- \"numElements\": 4,\n- \"ownerFlatTree\": null,\n- \"ownerID\": null,\n- \"ownerSubtreeLeafElementID\": null,\n- \"searchIndex\": null,\n- \"searchResults\": Array [],\n- \"searchText\": \"\",\n- \"selectedElementID\": 2,\n- \"selectedElementIndex\": 0,\n-}\n-`;\ndiff --git a\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElementContext-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElementContext-test.js\nindex f08a3d9d68..153bb43801 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElementContext-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElementContext-test.js\n@@ -15,6 +15,7 @@ import type {\n } from 'react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementContext';\n import type {FrontendBridge} from 'react-devtools-shared\/src\/bridge';\n import type Store from 'react-devtools-shared\/src\/devtools\/store';\n+import {withErrorsOrWarningsIgnored} from 'react-devtools-shared\/src\/__tests__\/utils';\n \n describe('InspectedElementContext', () => {\n let React;\n@@ -66,6 +67,10 @@ describe('InspectedElementContext', () => {\n .TreeContextController;\n });\n \n+ afterEach(() => {\n+ jest.restoreAllMocks();\n+ });\n+\n const Contexts = ({\n children,\n defaultSelectedElementID = null,\n@@ -386,10 +391,10 @@ describe('InspectedElementContext', () => {\n it('should temporarily disable console logging when re-running a component to inspect its hooks', async done => {\n let targetRenderCount = 0;\n \n- const errorSpy = ((console: any).error = jest.fn());\n- const infoSpy = ((console: any).info = jest.fn());\n- const logSpy = ((console: any).log = jest.fn());\n- const warnSpy = ((console: any).warn = jest.fn());\n+ jest.spyOn(console, 'error').mockImplementation(() => {});\n+ jest.spyOn(console, 'info').mockImplementation(() => {});\n+ jest.spyOn(console, 'log').mockImplementation(() => {});\n+ jest.spyOn(console, 'warn').mockImplementation(() => {});\n \n const Target = React.memo(props => {\n targetRenderCount++;\n@@ -407,14 +412,14 @@ describe('InspectedElementContext', () => {\n );\n \n expect(targetRenderCount).toBe(1);\n- expect(errorSpy).toHaveBeenCalledTimes(1);\n- expect(errorSpy).toHaveBeenCalledWith('error');\n- expect(infoSpy).toHaveBeenCalledTimes(1);\n- expect(infoSpy).toHaveBeenCalledWith('info');\n- expect(logSpy).toHaveBeenCalledTimes(1);\n- expect(logSpy).toHaveBeenCalledWith('log');\n- expect(warnSpy).toHaveBeenCalledTimes(1);\n- expect(warnSpy).toHaveBeenCalledWith('warn');\n+ expect(console.error).toHaveBeenCalledTimes(1);\n+ expect(console.error).toHaveBeenCalledWith('error');\n+ expect(console.info).toHaveBeenCalledTimes(1);\n+ expect(console.info).toHaveBeenCalledWith('info');\n+ expect(console.log).toHaveBeenCalledTimes(1);\n+ expect(console.log).toHaveBeenCalledWith('log');\n+ expect(console.warn).toHaveBeenCalledTimes(1);\n+ expect(console.warn).toHaveBeenCalledWith('warn');\n \n const id = ((store.getElementIDAtIndex(0): any): number);\n \n@@ -442,10 +447,10 @@ describe('InspectedElementContext', () => {\n \n expect(inspectedElement).not.toBe(null);\n expect(targetRenderCount).toBe(2);\n- expect(errorSpy).toHaveBeenCalledTimes(1);\n- expect(infoSpy).toHaveBeenCalledTimes(1);\n- expect(logSpy).toHaveBeenCalledTimes(1);\n- expect(warnSpy).toHaveBeenCalledTimes(1);\n+ expect(console.error).toHaveBeenCalledTimes(1);\n+ expect(console.info).toHaveBeenCalledTimes(1);\n+ expect(console.log).toHaveBeenCalledTimes(1);\n+ expect(console.warn).toHaveBeenCalledTimes(1);\n \n done();\n });\n@@ -1569,21 +1574,20 @@ describe('InspectedElementContext', () => {\n );\n expect(storeAsGlobal).not.toBeNull();\n \n- const logSpy = jest.fn();\n- spyOn(console, 'log').and.callFake(logSpy);\n+ jest.spyOn(console, 'log').mockImplementation(() => {});\n \n \/\/ Should store the whole value (not just the hydrated parts)\n storeAsGlobal(id, ['props', 'nestedObject']);\n jest.runOnlyPendingTimers();\n- expect(logSpy).toHaveBeenCalledWith('$reactTemp1');\n+ expect(console.log).toHaveBeenCalledWith('$reactTemp1');\n expect(global.$reactTemp1).toBe(nestedObject);\n \n- logSpy.mockReset();\n+ console.log.mockReset();\n \n \/\/ Should store the nested property specified (not just the outer value)\n storeAsGlobal(id, ['props', 'nestedObject', 'a', 'b']);\n jest.runOnlyPendingTimers();\n- expect(logSpy).toHaveBeenCalledWith('$reactTemp2');\n+ expect(console.log).toHaveBeenCalledWith('$reactTemp2');\n expect(global.$reactTemp2).toBe(nestedObject.a.b);\n \n done();\n@@ -1805,4 +1809,421 @@ describe('InspectedElementContext', () => {\n \n done();\n });\n+\n+ describe('inline errors and warnings', () => {\n+ \/\/ Some actions require the Fiber id.\n+ \/\/ In those instances you might want to make assertions based on the ID instead of the index.\n+ function getErrorsAndWarningsForElement(id: number) {\n+ const index = ((store.getIndexOfElementID(id): any): number);\n+ return getErrorsAndWarningsForElementAtIndex(index);\n+ }\n+\n+ async function getErrorsAndWarningsForElementAtIndex(index) {\n+ const id = ((store.getElementIDAtIndex(index): any): number);\n+\n+ let errors = null;\n+ let warnings = null;\n+\n+ function Suspender({target}) {\n+ const {getInspectedElement} = React.useContext(InspectedElementContext);\n+ const inspectedElement = getInspectedElement(id);\n+ errors = inspectedElement.errors;\n+ warnings = inspectedElement.warnings;\n+ return null;\n+ }\n+\n+ let root;\n+ await utils.actAsync(() => {\n+ root = TestRenderer.create(\n+ \n+ \n+ \n+ <\/React.Suspense>\n+ <\/Contexts>,\n+ );\n+ }, false);\n+ await utils.actAsync(() => {\n+ root.unmount();\n+ }, false);\n+\n+ return {errors, warnings};\n+ }\n+\n+ it('during render get recorded', async () => {\n+ const Example = () => {\n+ console.error('test-only: render error');\n+ console.warn('test-only: render warning');\n+ return null;\n+ };\n+\n+ const container = document.createElement('div');\n+\n+ await withErrorsOrWarningsIgnored(['test-only: '], async () => {\n+ await utils.actAsync(() =>\n+ ReactDOM.render(, container),\n+ );\n+ });\n+\n+ const data = await getErrorsAndWarningsForElementAtIndex(0);\n+ expect(data).toMatchInlineSnapshot(`\n+ Object {\n+ \"errors\": Array [\n+ Array [\n+ \"test-only: render error\",\n+ 1,\n+ ],\n+ ],\n+ \"warnings\": Array [\n+ Array [\n+ \"test-only: render warning\",\n+ 1,\n+ ],\n+ ],\n+ }\n+ `);\n+ });\n+\n+ it('during render get deduped', async () => {\n+ const Example = () => {\n+ console.error('test-only: render error');\n+ console.error('test-only: render error');\n+ console.warn('test-only: render warning');\n+ console.warn('test-only: render warning');\n+ console.warn('test-only: render warning');\n+ return null;\n+ };\n+\n+ const container = document.createElement('div');\n+ await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {\n+ await utils.actAsync(() =>\n+ ReactDOM.render(, container),\n+ );\n+ });\n+ const data = await getErrorsAndWarningsForElementAtIndex(0);\n+ expect(data).toMatchInlineSnapshot(`\n+ Object {\n+ \"errors\": Array [\n+ Array [\n+ \"test-only: render error\",\n+ 2,\n+ ],\n+ ],\n+ \"warnings\": Array [\n+ Array [\n+ \"test-only: render warning\",\n+ 3,\n+ ],\n+ ],\n+ }\n+ `);\n+ });\n+\n+ it('during layout (mount) get recorded', async () => {\n+ const Example = () => {\n+ \/\/ Note we only test mount because once the component unmounts,\n+ \/\/ it is no longer in the store and warnings are ignored.\n+ React.useLayoutEffect(() => {\n+ console.error('test-only: useLayoutEffect error');\n+ console.warn('test-only: useLayoutEffect warning');\n+ }, []);\n+ return null;\n+ };\n+\n+ const container = document.createElement('div');\n+ await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {\n+ await utils.actAsync(() =>\n+ ReactDOM.render(, container),\n+ );\n+ });\n+\n+ const data = await getErrorsAndWarningsForElementAtIndex(0);\n+ expect(data).toMatchInlineSnapshot(`\n+ Object {\n+ \"errors\": Array [\n+ Array [\n+ \"test-only: useLayoutEffect error\",\n+ 1,\n+ ],\n+ ],\n+ \"warnings\": Array [\n+ Array [\n+ \"test-only: useLayoutEffect warning\",\n+ 1,\n+ ],\n+ ],\n+ }\n+ `);\n+ });\n+\n+ it('during passive (mount) get recorded', async () => {\n+ const Example = () => {\n+ \/\/ Note we only test mount because once the component unmounts,\n+ \/\/ it is no longer in the store and warnings are ignored.\n+ React.useEffect(() => {\n+ console.error('test-only: useEffect error');\n+ console.warn('test-only: useEffect warning');\n+ }, []);\n+ return null;\n+ };\n+\n+ const container = document.createElement('div');\n+ await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {\n+ await utils.actAsync(() =>\n+ ReactDOM.render(, container),\n+ );\n+ });\n+\n+ const data = await getErrorsAndWarningsForElementAtIndex(0);\n+ expect(data).toMatchInlineSnapshot(`\n+ Object {\n+ \"errors\": Array [\n+ Array [\n+ \"test-only: useEffect error\",\n+ 1,\n+ ],\n+ ],\n+ \"warnings\": Array [\n+ Array [\n+ \"test-only: useEffect warning\",\n+ 1,\n+ ],\n+ ],\n+ }\n+ `);\n+ });\n+\n+ it('from react get recorded without a component stack', async () => {\n+ const Example = () => {\n+ return [

];\n+ };\n+\n+ const container = document.createElement('div');\n+ await utils.withErrorsOrWarningsIgnored(\n+ ['Warning: Each child in a list should have a unique \"key\" prop.'],\n+ async () => {\n+ await utils.actAsync(() =>\n+ ReactDOM.render(, container),\n+ );\n+ },\n+ );\n+\n+ const data = await getErrorsAndWarningsForElementAtIndex(0);\n+ expect(data).toMatchInlineSnapshot(`\n+ Object {\n+ \"errors\": Array [\n+ Array [\n+ \"Warning: Each child in a list should have a unique \\\\\"key\\\\\" prop. See https:\/\/reactjs.org\/link\/warning-keys for more information.\",\n+ 1,\n+ ],\n+ ],\n+ \"warnings\": Array [],\n+ }\n+ `);\n+ });\n+\n+ it('can be cleared for the whole app', async () => {\n+ const Example = () => {\n+ console.error('test-only: render error');\n+ console.warn('test-only: render warning');\n+ return null;\n+ };\n+\n+ const container = document.createElement('div');\n+ await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {\n+ await utils.actAsync(() =>\n+ ReactDOM.render(, container),\n+ );\n+ });\n+\n+ store.clearErrorsAndWarnings();\n+ \/\/ Flush events to the renderer.\n+ jest.runOnlyPendingTimers();\n+\n+ const data = await getErrorsAndWarningsForElementAtIndex(0);\n+ expect(data).toMatchInlineSnapshot(`\n+ Object {\n+ \"errors\": Array [],\n+ \"warnings\": Array [],\n+ }\n+ `);\n+ });\n+\n+ it('can be cleared for a particular Fiber (only errors)', async () => {\n+ const Example = ({id}) => {\n+ console.error(`test-only: render error #${id}`);\n+ console.warn(`test-only: render warning #${id}`);\n+ return null;\n+ };\n+\n+ const container = document.createElement('div');\n+ await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container,\n+ ),\n+ );\n+ });\n+\n+ store.clearWarningsForElement(2);\n+ \/\/ Flush events to the renderer.\n+ jest.runOnlyPendingTimers();\n+\n+ let data = [\n+ await getErrorsAndWarningsForElement(1),\n+ await getErrorsAndWarningsForElement(2),\n+ ];\n+ expect(data).toMatchInlineSnapshot(`\n+ Array [\n+ Object {\n+ \"errors\": Array [\n+ Array [\n+ \"test-only: render error #1\",\n+ 1,\n+ ],\n+ ],\n+ \"warnings\": Array [\n+ Array [\n+ \"test-only: render warning #1\",\n+ 1,\n+ ],\n+ ],\n+ },\n+ Object {\n+ \"errors\": Array [\n+ Array [\n+ \"test-only: render error #2\",\n+ 1,\n+ ],\n+ ],\n+ \"warnings\": Array [],\n+ },\n+ ]\n+ `);\n+\n+ store.clearWarningsForElement(1);\n+ \/\/ Flush events to the renderer.\n+ jest.runOnlyPendingTimers();\n+\n+ data = [\n+ await getErrorsAndWarningsForElement(1),\n+ await getErrorsAndWarningsForElement(2),\n+ ];\n+ expect(data).toMatchInlineSnapshot(`\n+ Array [\n+ Object {\n+ \"errors\": Array [\n+ Array [\n+ \"test-only: render error #1\",\n+ 1,\n+ ],\n+ ],\n+ \"warnings\": Array [],\n+ },\n+ Object {\n+ \"errors\": Array [\n+ Array [\n+ \"test-only: render error #2\",\n+ 1,\n+ ],\n+ ],\n+ \"warnings\": Array [],\n+ },\n+ ]\n+ `);\n+ });\n+\n+ it('can be cleared for a particular Fiber (only warnings)', async () => {\n+ const Example = ({id}) => {\n+ console.error(`test-only: render error #${id}`);\n+ console.warn(`test-only: render warning #${id}`);\n+ return null;\n+ };\n+\n+ const container = document.createElement('div');\n+ await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container,\n+ ),\n+ );\n+ });\n+\n+ store.clearErrorsForElement(2);\n+ \/\/ Flush events to the renderer.\n+ jest.runOnlyPendingTimers();\n+\n+ let data = [\n+ await getErrorsAndWarningsForElement(1),\n+ await getErrorsAndWarningsForElement(2),\n+ ];\n+ expect(data).toMatchInlineSnapshot(`\n+ Array [\n+ Object {\n+ \"errors\": Array [\n+ Array [\n+ \"test-only: render error #1\",\n+ 1,\n+ ],\n+ ],\n+ \"warnings\": Array [\n+ Array [\n+ \"test-only: render warning #1\",\n+ 1,\n+ ],\n+ ],\n+ },\n+ Object {\n+ \"errors\": Array [],\n+ \"warnings\": Array [\n+ Array [\n+ \"test-only: render warning #2\",\n+ 1,\n+ ],\n+ ],\n+ },\n+ ]\n+ `);\n+\n+ store.clearErrorsForElement(1);\n+ \/\/ Flush events to the renderer.\n+ jest.runOnlyPendingTimers();\n+\n+ data = [\n+ await getErrorsAndWarningsForElement(1),\n+ await getErrorsAndWarningsForElement(2),\n+ ];\n+ expect(data).toMatchInlineSnapshot(`\n+ Array [\n+ Object {\n+ \"errors\": Array [],\n+ \"warnings\": Array [\n+ Array [\n+ \"test-only: render warning #1\",\n+ 1,\n+ ],\n+ ],\n+ },\n+ Object {\n+ \"errors\": Array [],\n+ \"warnings\": Array [\n+ Array [\n+ \"test-only: render warning #2\",\n+ 1,\n+ ],\n+ ],\n+ },\n+ ]\n+ `);\n+ });\n+ });\n });\ndiff --git a\/packages\/react-devtools-shared\/src\/__tests__\/profilerStore-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/profilerStore-test.js\nindex 3a6a785979..dca154ad17 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/profilerStore-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/profilerStore-test.js\n@@ -120,4 +120,19 @@ describe('ProfilerStore', () => {\n expect(data.commitData).toHaveLength(1);\n expect(data.operations).toHaveLength(1);\n });\n+\n+ it('should throw if component filters are modified while profiling', () => {\n+ utils.act(() => store.profilerStore.startProfiling());\n+\n+ expect(() => {\n+ utils.act(() => {\n+ const {\n+ ElementTypeHostComponent,\n+ } = require('react-devtools-shared\/src\/types');\n+ store.componentFilters = [\n+ utils.createElementTypeFilter(ElementTypeHostComponent),\n+ ];\n+ });\n+ }).toThrow('Cannot modify filter preferences while profiling');\n+ });\n });\ndiff --git a\/packages\/react-devtools-shared\/src\/__tests__\/setupTests.js b\/packages\/react-devtools-shared\/src\/__tests__\/setupTests.js\nindex e1f7f13f76..b244c7e0cf 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/setupTests.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/setupTests.js\n@@ -33,11 +33,24 @@ env.beforeEach(() => {\n const {\n getDefaultComponentFilters,\n saveComponentFilters,\n+ setShowInlineWarningsAndErrors,\n } = require('react-devtools-shared\/src\/utils');\n \n \/\/ Fake timers let us flush Bridge operations between setup and assertions.\n jest.useFakeTimers();\n \n+ \/\/ Use utils.js#withErrorsOrWarningsIgnored instead of directly mutating this array.\n+ global._ignoredErrorOrWarningMessages = [];\n+ function shouldIgnoreConsoleErrorOrWarn(args) {\n+ const firstArg = args[0];\n+ if (typeof firstArg !== 'string') {\n+ return false;\n+ }\n+ return global._ignoredErrorOrWarningMessages.some(errorOrWarningMessage => {\n+ return firstArg.indexOf(errorOrWarningMessage) !== -1;\n+ });\n+ }\n+\n const originalConsoleError = console.error;\n \/\/ $FlowFixMe\n console.error = (...args) => {\n@@ -54,14 +67,32 @@ env.beforeEach(() => {\n \/\/ DevTools intentionally wraps updates with acts from both DOM and test-renderer,\n \/\/ since test updates are expected to impact both renderers.\n return;\n+ } else if (shouldIgnoreConsoleErrorOrWarn(args)) {\n+ \/\/ Allows testing how DevTools behaves when it encounters console.error without cluttering the test output.\n+ \/\/ Errors can be ignored by running in a special context provided by utils.js#withErrorsOrWarningsIgnored\n+ return;\n }\n originalConsoleError.apply(console, args);\n };\n+ const originalConsoleWarn = console.warn;\n+ \/\/ $FlowFixMe\n+ console.warn = (...args) => {\n+ if (shouldIgnoreConsoleErrorOrWarn(args)) {\n+ \/\/ Allows testing how DevTools behaves when it encounters console.warn without cluttering the test output.\n+ \/\/ Warnings can be ignored by running in a special context provided by utils.js#withErrorsOrWarningsIgnored\n+ return;\n+ }\n+ originalConsoleWarn.apply(console, args);\n+ };\n \n \/\/ Initialize filters to a known good state.\n saveComponentFilters(getDefaultComponentFilters());\n global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters();\n \n+ \/\/ Also initialize inline warnings so that we can test them.\n+ setShowInlineWarningsAndErrors(true);\n+ global.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = true;\n+\n installHook(global);\n \n const bridgeListeners = [];\ndiff --git a\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\nindex 92face2f37..33d3bc0a07 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\n@@ -14,6 +14,7 @@ describe('Store', () => {\n let act;\n let getRendererID;\n let store;\n+ let withErrorsOrWarningsIgnored;\n \n beforeEach(() => {\n agent = global.agent;\n@@ -25,6 +26,7 @@ describe('Store', () => {\n const utils = require('.\/utils');\n act = utils.act;\n getRendererID = utils.getRendererID;\n+ withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;\n });\n \n it('should not allow a root node to be collapsed', () => {\n@@ -1008,4 +1010,316 @@ describe('Store', () => {\n done();\n });\n });\n+\n+ describe('inline errors and warnings', () => {\n+ it('during render are counted', () => {\n+ function Example() {\n+ console.error('test-only: render error');\n+ console.warn('test-only: render warning');\n+ return null;\n+ }\n+ const container = document.createElement('div');\n+\n+ withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(() => ReactDOM.render(, container));\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 1, ⚠ 1\n+ [root]\n+ ✕⚠\n+ `);\n+\n+ withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(() => ReactDOM.render(, container));\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 2, ⚠ 2\n+ [root]\n+ ✕⚠\n+ `);\n+ });\n+\n+ it('during layout get counted', () => {\n+ function Example() {\n+ React.useLayoutEffect(() => {\n+ console.error('test-only: layout error');\n+ console.warn('test-only: layout warning');\n+ });\n+ return null;\n+ }\n+ const container = document.createElement('div');\n+\n+ withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(() => ReactDOM.render(, container));\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 1, ⚠ 1\n+ [root]\n+ ✕⚠\n+ `);\n+\n+ withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(() => ReactDOM.render(, container));\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 2, ⚠ 2\n+ [root]\n+ ✕⚠\n+ `);\n+ });\n+\n+ \/\/ This is not great, but it seems safer than potentially flushing between commits.\n+ \/\/ Our logic for determining how to handle e.g. suspended trees or error boundaries\n+ \/\/ is built on the assumption that we're evaluating the results of a commit, not an in-progress render.\n+ it('during passive get counted (but not until the next commit)', () => {\n+ function Example() {\n+ React.useEffect(() => {\n+ console.error('test-only: passive error');\n+ console.warn('test-only: passive warning');\n+ });\n+ return null;\n+ }\n+ const container = document.createElement('div');\n+\n+ withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(() => ReactDOM.render(, container));\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ \n+ `);\n+\n+ withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(() => ReactDOM.render(, container));\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 1, ⚠ 1\n+ [root]\n+ ✕⚠\n+ `);\n+\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(store).toMatchInlineSnapshot(``);\n+ });\n+\n+ it('from react get counted', () => {\n+ const container = document.createElement('div');\n+ function Example() {\n+ return [];\n+ }\n+ function Child() {\n+ return null;\n+ }\n+\n+ withErrorsOrWarningsIgnored(\n+ ['Warning: Each child in a list should have a unique \"key\" prop'],\n+ () => {\n+ act(() => ReactDOM.render(, container));\n+ },\n+ );\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 1, ⚠ 0\n+ [root]\n+ ▾ ✕\n+ \n+ `);\n+ });\n+\n+ it('can be cleared for the whole app', () => {\n+ function Example() {\n+ console.error('test-only: render error');\n+ console.warn('test-only: render warning');\n+ return null;\n+ }\n+ const container = document.createElement('div');\n+ withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container,\n+ ),\n+ );\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 2, ⚠ 2\n+ [root]\n+ ✕⚠\n+ ✕⚠\n+ `);\n+\n+ store.clearErrorsAndWarnings();\n+ \/\/ flush events to the renderer\n+ jest.runAllTimers();\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ \n+ \n+ `);\n+ });\n+\n+ it('can be cleared for particular Fiber (only warnings)', () => {\n+ function Example() {\n+ console.error('test-only: render error');\n+ console.warn('test-only: render warning');\n+ return null;\n+ }\n+ const container = document.createElement('div');\n+ withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container,\n+ ),\n+ );\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 2, ⚠ 2\n+ [root]\n+ ✕⚠\n+ ✕⚠\n+ `);\n+\n+ store.clearWarningsForElement(2);\n+ \/\/ Flush events to the renderer.\n+ jest.runAllTimers();\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 2, ⚠ 1\n+ [root]\n+ ✕⚠\n+ ✕\n+ `);\n+ });\n+\n+ it('can be cleared for a particular Fiber (only errors)', () => {\n+ function Example() {\n+ console.error('test-only: render error');\n+ console.warn('test-only: render warning');\n+ return null;\n+ }\n+ const container = document.createElement('div');\n+ withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container,\n+ ),\n+ );\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 2, ⚠ 2\n+ [root]\n+ ✕⚠\n+ ✕⚠\n+ `);\n+\n+ store.clearErrorsForElement(2);\n+ \/\/ Flush events to the renderer.\n+ jest.runAllTimers();\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 1, ⚠ 2\n+ [root]\n+ ✕⚠\n+ ⚠\n+ `);\n+ });\n+\n+ it('are updated when fibers are removed from the tree', () => {\n+ function ComponentWithWarning() {\n+ console.warn('test-only: render warning');\n+ return null;\n+ }\n+ function ComponentWithError() {\n+ console.error('test-only: render error');\n+ return null;\n+ }\n+ function ComponentWithWarningAndError() {\n+ console.error('test-only: render error');\n+ console.warn('test-only: render warning');\n+ return null;\n+ }\n+ const container = document.createElement('div');\n+ withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container,\n+ ),\n+ );\n+ });\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 2, ⚠ 2\n+ [root]\n+ ✕\n+ ⚠\n+ ✕⚠\n+ `);\n+\n+ withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container,\n+ ),\n+ );\n+ });\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 1, ⚠ 2\n+ [root]\n+ ⚠\n+ ✕⚠\n+ `);\n+\n+ withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ <\/React.Fragment>,\n+ container,\n+ ),\n+ );\n+ });\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 0, ⚠ 2\n+ [root]\n+ ⚠\n+ `);\n+\n+ withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(() => ReactDOM.render(, container));\n+ });\n+ expect(store).toMatchInlineSnapshot(`[root]`);\n+ expect(store.errorCount).toBe(0);\n+ expect(store.warningCount).toBe(0);\n+ });\n+ });\n });\ndiff --git a\/packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js\nindex a8a0e151ef..4a365acb0e 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/storeComponentFilters-test.js\n@@ -48,22 +48,28 @@ describe('Store component filters', () => {\n });\n \n it('should support filtering by element type', () => {\n- class Root extends React.Component<{|children: React$Node|}> {\n+ class ClassComponent extends React.Component<{|children: React$Node|}> {\n render() {\n return

{this.props.children}<\/div>;\n }\n }\n- const Component = () =>

Hi<\/div>;\n+ const FunctionComponent = () =>

Hi<\/div>;\n \n act(() =>\n ReactDOM.render(\n- \n- \n- <\/Root>,\n+ \n+ \n+ <\/ClassComponent>,\n document.createElement('div'),\n ),\n );\n- expect(store).toMatchSnapshot('1: mount');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾

\n+ ▾ \n+

\n+ `);\n \n act(\n () =>\n@@ -71,8 +77,11 @@ describe('Store component filters', () => {\n utils.createElementTypeFilter(Types.ElementTypeHostComponent),\n ]),\n );\n-\n- expect(store).toMatchSnapshot('2: hide host components');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ \n+ `);\n \n act(\n () =>\n@@ -80,8 +89,12 @@ describe('Store component filters', () => {\n utils.createElementTypeFilter(Types.ElementTypeClass),\n ]),\n );\n-\n- expect(store).toMatchSnapshot('3: hide class components');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾

\n+ ▾ \n+

\n+ `);\n \n act(\n () =>\n@@ -90,8 +103,11 @@ describe('Store component filters', () => {\n utils.createElementTypeFilter(Types.ElementTypeFunction),\n ]),\n );\n-\n- expect(store).toMatchSnapshot('4: hide class and function components');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾

\n+

\n+ `);\n \n act(\n () =>\n@@ -100,15 +116,33 @@ describe('Store component filters', () => {\n utils.createElementTypeFilter(Types.ElementTypeFunction, false),\n ]),\n );\n-\n- expect(store).toMatchSnapshot('5: disable all filters');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾

\n+ ▾ \n+

\n+ `);\n+\n+ act(() => (store.componentFilters = []));\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾

\n+ ▾ \n+

\n+ `);\n });\n \n it('should ignore invalid ElementTypeRoot filter', () => {\n- const Root = () =>

Hi<\/div>;\n+ const Component = () =>

Hi<\/div>;\n \n- act(() => ReactDOM.render(, document.createElement('div')));\n- expect(store).toMatchSnapshot('1: mount');\n+ act(() => ReactDOM.render(, document.createElement('div')));\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+

\n+ `);\n \n act(\n () =>\n@@ -117,7 +151,11 @@ describe('Store component filters', () => {\n ]),\n );\n \n- expect(store).toMatchSnapshot('2: add invalid filter');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+

\n+ `);\n });\n \n it('should filter by display name', () => {\n@@ -136,27 +174,59 @@ describe('Store component filters', () => {\n document.createElement('div'),\n ),\n );\n- expect(store).toMatchSnapshot('1: mount');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ ▾ \n+ \n+ `);\n \n act(\n () => (store.componentFilters = [utils.createDisplayNameFilter('Foo')]),\n );\n- expect(store).toMatchSnapshot('2: filter \"Foo\"');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ \n+ ▾ \n+ \n+ ▾ \n+ \n+ `);\n \n act(() => (store.componentFilters = [utils.createDisplayNameFilter('Ba')]));\n- expect(store).toMatchSnapshot('3: filter \"Ba\"');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ \n+ \n+ \n+ `);\n \n act(\n () => (store.componentFilters = [utils.createDisplayNameFilter('B.z')]),\n );\n- expect(store).toMatchSnapshot('4: filter \"B.z\"');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ `);\n });\n \n it('should filter by path', () => {\n const Component = () =>

Hi<\/div>;\n \n act(() => ReactDOM.render(, document.createElement('div')));\n- expect(store).toMatchSnapshot('1: mount');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+

\n+ `);\n \n act(\n () =>\n@@ -165,9 +235,7 @@ describe('Store component filters', () => {\n ]),\n );\n \n- expect(store).toMatchSnapshot(\n- '2: hide all components declared within this test filed',\n- );\n+ expect(store).toMatchInlineSnapshot(`[root]`);\n \n act(\n () =>\n@@ -176,7 +244,11 @@ describe('Store component filters', () => {\n ]),\n );\n \n- expect(store).toMatchSnapshot('3: hide components in a made up fake path');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+

\n+ `);\n });\n \n it('should filter HOCs', () => {\n@@ -187,15 +259,29 @@ describe('Store component filters', () => {\n Bar.displayName = 'Bar(Foo(Component))';\n \n act(() => ReactDOM.render(, document.createElement('div')));\n- expect(store).toMatchSnapshot('1: mount');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ [Bar][Foo]\n+ ▾ [Foo]\n+ ▾ \n+

\n+ `);\n \n act(() => (store.componentFilters = [utils.createHOCFilter(true)]));\n-\n- expect(store).toMatchSnapshot('2: hide all HOCs');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+

\n+ `);\n \n act(() => (store.componentFilters = [utils.createHOCFilter(false)]));\n-\n- expect(store).toMatchSnapshot('3: disable HOC filter');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ [Bar][Foo]\n+ ▾ [Foo]\n+ ▾ \n+

\n+ `);\n });\n \n it('should not send a bridge update if the set of enabled filters has not changed', () => {\n@@ -252,12 +338,117 @@ describe('Store component filters', () => {\n \n const container = document.createElement('div');\n act(() => ReactDOM.render(, container));\n- expect(store).toMatchSnapshot('1: suspended');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+

\n+ `);\n \n act(() => ReactDOM.render(, container));\n- expect(store).toMatchSnapshot('2: resolved');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ \n+ `);\n \n act(() => ReactDOM.render(, container));\n- expect(store).toMatchSnapshot('3: suspended');\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+

\n+ `);\n+ });\n+\n+ describe('inline errors and warnings', () => {\n+ it('only counts for unfiltered components', () => {\n+ function ComponentWithWarning() {\n+ console.warn('test-only: render warning');\n+ return null;\n+ }\n+ function ComponentWithError() {\n+ console.error('test-only: render error');\n+ return null;\n+ }\n+ function ComponentWithWarningAndError() {\n+ console.error('test-only: render error');\n+ console.warn('test-only: render warning');\n+ return null;\n+ }\n+ const container = document.createElement('div');\n+ utils.withErrorsOrWarningsIgnored(['test-only:'], () => {\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createDisplayNameFilter('Warning'),\n+ utils.createDisplayNameFilter('Error'),\n+ ]),\n+ );\n+ act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container,\n+ ),\n+ );\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`[root]`);\n+ expect(store.errorCount).toBe(0);\n+ expect(store.warningCount).toBe(0);\n+\n+ act(() => (store.componentFilters = []));\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 2, ⚠ 2\n+ [root]\n+ ✕\n+ ⚠\n+ ✕⚠\n+ `);\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [utils.createDisplayNameFilter('Warning')]),\n+ );\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 1, ⚠ 0\n+ [root]\n+ ✕\n+ `);\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [utils.createDisplayNameFilter('Error')]),\n+ );\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 0, ⚠ 1\n+ [root]\n+ ⚠\n+ `);\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createDisplayNameFilter('Warning'),\n+ utils.createDisplayNameFilter('Error'),\n+ ]),\n+ );\n+ expect(store).toMatchInlineSnapshot(`[root]`);\n+ expect(store.errorCount).toBe(0);\n+ expect(store.warningCount).toBe(0);\n+\n+ act(() => (store.componentFilters = []));\n+ expect(store).toMatchInlineSnapshot(`\n+ ✕ 2, ⚠ 2\n+ [root]\n+ ✕\n+ ⚠\n+ ✕⚠\n+ `);\n+ });\n });\n });\ndiff --git a\/packages\/react-devtools-shared\/src\/__tests__\/treeContext-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/treeContext-test.js\nindex 0b672f9141..8c057fb720 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/treeContext-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/treeContext-test.js\n@@ -22,6 +22,7 @@ describe('TreeListContext', () => {\n let bridge: FrontendBridge;\n let store: Store;\n let utils;\n+ let withErrorsOrWarningsIgnored;\n \n let BridgeContext;\n let StoreContext;\n@@ -34,6 +35,8 @@ describe('TreeListContext', () => {\n utils = require('.\/utils');\n utils.beforeEachProfiling();\n \n+ withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;\n+\n bridge = global.bridge;\n store = global.store;\n store.collapseNodesByDefault = false;\n@@ -88,43 +91,111 @@ describe('TreeListContext', () => {\n ReactDOM.render(, document.createElement('div')),\n );\n \n- expect(store).toMatchSnapshot('0: mount');\n-\n let renderer;\n utils.act(() => (renderer = TestRenderer.create()));\n- expect(state).toMatchSnapshot('1: initial state');\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ \n+ \n+ `);\n+\n+ \/\/ Test stepping through to the end\n \n utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));\n utils.act(() => renderer.update());\n- expect(state).toMatchSnapshot('2: select first element');\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ → ▾ \n+ ▾ \n+ \n+ \n+ `);\n \n- while (\n- state.selectedElementIndex !== null &&\n- state.selectedElementIndex < store.numElements - 1\n- ) {\n- const index = ((state.selectedElementIndex: any): number);\n- utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));\n- utils.act(() => renderer.update());\n- expect(state).toMatchSnapshot(`3: select element after (${index})`);\n- }\n+ utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ → ▾ \n+ \n+ \n+ `);\n \n- while (\n- state.selectedElementIndex !== null &&\n- state.selectedElementIndex > 0\n- ) {\n- const index = ((state.selectedElementIndex: any): number);\n- utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));\n- utils.act(() => renderer.update());\n- expect(state).toMatchSnapshot(`4: select element before (${index})`);\n- }\n+ utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ → \n+ \n+ `);\n+\n+ utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ \n+ → \n+ `);\n+\n+ \/\/ Test stepping back to the beginning\n+\n+ utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ → \n+ \n+ `);\n+\n+ utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ → ▾ \n+ \n+ \n+ `);\n+\n+ utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ → ▾ \n+ ▾ \n+ \n+ \n+ `);\n+\n+ \/\/ Test wrap around behavior\n \n utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));\n utils.act(() => renderer.update());\n- expect(state).toMatchSnapshot('5: select previous wraps around to last');\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ \n+ → \n+ `);\n \n utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));\n utils.act(() => renderer.update());\n- expect(state).toMatchSnapshot('6: select next wraps around to first');\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ → ▾ \n+ ▾ \n+ \n+ \n+ `);\n });\n \n it('should select child elements', () => {\n@@ -146,30 +217,71 @@ describe('TreeListContext', () => {\n ReactDOM.render(, document.createElement('div')),\n );\n \n- expect(store).toMatchSnapshot('0: mount');\n-\n let renderer;\n utils.act(() => (renderer = TestRenderer.create()));\n- expect(state).toMatchSnapshot('1: initial state');\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ \n+ \n+ ▾ \n+ \n+ \n+ `);\n \n utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 0}));\n utils.act(() => renderer.update());\n- expect(state).toMatchSnapshot('2: select first element');\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ → ▾ \n+ ▾ \n+ \n+ \n+ ▾ \n+ \n+ \n+ `);\n \n utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));\n utils.act(() => renderer.update());\n- expect(state).toMatchSnapshot('3: select Parent');\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ → ▾ \n+ \n+ \n+ ▾ \n+ \n+ \n+ `);\n \n utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));\n utils.act(() => renderer.update());\n- expect(state).toMatchSnapshot('4: select Child');\n-\n- const previousState = state;\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ → \n+ \n+ ▾ \n+ \n+ \n+ `);\n \n \/\/ There are no more children to select, so this should be a no-op\n utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));\n utils.act(() => renderer.update());\n- expect(state).toEqual(previousState);\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ → \n+ \n+ ▾ \n+ \n+ \n+ `);\n });\n \n it('should select parent elements and then collapse', () => {\n@@ -191,27 +303,78 @@ describe('TreeListContext', () => {\n ReactDOM.render(, document.createElement('div')),\n );\n \n- expect(store).toMatchSnapshot('0: mount');\n-\n let renderer;\n utils.act(() => (renderer = TestRenderer.create()));\n- expect(state).toMatchSnapshot('1: initial state');\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ \n+ \n+ ▾ \n+ \n+ \n+ `);\n \n const lastChildID = store.getElementIDAtIndex(store.numElements - 1);\n \n+ \/\/ Select the last child\n utils.act(() =>\n dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: lastChildID}),\n );\n utils.act(() => renderer.update(

dillon1000/react

Files changed