DevTools: update error indices when elements are added/removed (#22144)
Sebastian Silbermann committed
Aug 20, 2021 at 17:55 UTC
b6ff9ad1630b4f1d7cb98e9b9ec46bca315bb302
2 files changed
+70
packages/react-devtools-shared/src/__tests__/treeContext-test.js
+58
@@ -2119,6 +2119,64 @@ describe('TreeListContext', () => {
2119
`);
2120
});
2121
2122
+ it('should update correctly when elements are added/removed', () => {
2123
+ const container = document.createElement('div');
2124
+ let errored = false;
2125
+ function ErrorOnce() {
2126
+ if (!errored) {
2127
+ errored = true;
2128
+ console.error('test-only:one-time-error');
2129
+ }
2130
+ return null;
2131
+ }
2132
+ withErrorsOrWarningsIgnored(['test-only:'], () =>
2133
+ utils.act(() =>
2134
+ legacyRender(
2135
+ <React.Fragment>
2136
+ <ErrorOnce key="error" />
2137
+ </React.Fragment>,
2138
+ container,
2139
+ ),
2140
+ ),
2141
+ );
2142
+
2143
+ let renderer;
2144
+ utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
2145
+ expect(state).toMatchInlineSnapshot(`
2146
+ ✕ 1, ⚠ 0
2147
+ [root]
2148
+ <ErrorOnce key="error"> ✕
2149
+ `);
2150
+
2151
+ withErrorsOrWarningsIgnored(['test-only:'], () =>
2152
+ utils.act(() =>
2153
+ legacyRender(
2154
+ <React.Fragment>
2155
+ <Child />
2156
+ <ErrorOnce key="error" />
2157
+ </React.Fragment>,
2158
+ container,
2159
+ ),
2160
+ ),
2161
+ );
2162
+
2163
+ utils.act(() => renderer.update(<Contexts />));
2164
+ expect(state).toMatchInlineSnapshot(`
2165
+ ✕ 1, ⚠ 0
2166
+ [root]
2167
+ <Child>
2168
+ <ErrorOnce key="error"> ✕
2169
+ `);
2170
+
2171
+ selectNextErrorOrWarning();
2172
+ expect(state).toMatchInlineSnapshot(`
2173
+ ✕ 1, ⚠ 0
2174
+ [root]
2175
+ <Child>
2176
+ → <ErrorOnce key="error"> ✕
2177
+ `);
2178
+ });
2179
+
2180
it('should update select and auto-expand parts components within hidden parts of the tree', () => {
2181
const Wrapper = ({children}) => children;
2182
packages/react-devtools-shared/src/devtools/store.js
+12
@@ -1187,6 +1187,18 @@ export default class Store extends EventEmitter<{|
1187
console.groupEnd();
1188
}
1189
1190
+ const indicesOfCachedErrorsOrWarningsAreStale =
1191
+ !haveErrorsOrWarningsChanged &&
1192
+ (addedElementIDs.length > 0 || removedElementIDs.size > 0);
1193
+ if (indicesOfCachedErrorsOrWarningsAreStale) {
1194
+ this._cachedErrorAndWarningTuples.forEach(entry => {
1195
+ const index = this.getIndexOfElementID(entry.id);
1196
+ if (index !== null) {
1197
+ entry.index = index;
1198
+ }
1199
+ });
1200
+ }
1201
+
1202
this.emit('mutated', [addedElementIDs, removedElementIDs]);
1203
};
1204