Skip to content

Commit 0423637

Browse files
committed
chore: use versioned render in storeComponentFilters test
1 parent 596827f commit 0423637

File tree

1 file changed

+41
-71
lines changed

1 file changed

+41
-71
lines changed

packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js

Lines changed: 41 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,15 @@
1010
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
1111
import type Store from 'react-devtools-shared/src/devtools/store';
1212

13+
import {getVersionedRenderImplementation} from './utils';
14+
1315
describe('Store component filters', () => {
1416
let React;
1517
let Types;
1618
let bridge: FrontendBridge;
17-
let legacyRender;
1819
let store: Store;
1920
let utils;
20-
21-
const act = async (callback: Function) => {
22-
if (React.act != null) {
23-
await React.act(callback);
24-
} else if (React.unstable_act != null) {
25-
await React.unstable_act(callback);
26-
} else {
27-
callback();
28-
}
29-
30-
jest.runAllTimers(); // Flush Bridge operations
31-
};
21+
let actAsync;
3222

3323
beforeEach(() => {
3424
bridge = global.bridge;
@@ -41,12 +31,14 @@ describe('Store component filters', () => {
4131
Types = require('react-devtools-shared/src/frontend/types');
4232
utils = require('./utils');
4333

44-
legacyRender = utils.legacyRender;
34+
actAsync = utils.actAsync;
4535
});
4636

37+
const {render} = getVersionedRenderImplementation();
38+
4739
// @reactVersion >= 16.0
4840
it('should throw if filters are updated while profiling', async () => {
49-
await act(async () => store.profilerStore.startProfiling());
41+
await actAsync(async () => store.profilerStore.startProfiling());
5042
expect(() => (store.componentFilters = [])).toThrow(
5143
'Cannot modify filter preferences while profiling',
5244
);
@@ -61,12 +53,11 @@ describe('Store component filters', () => {
6153
}
6254
const FunctionComponent = () => <div>Hi</div>;
6355

64-
await act(async () =>
65-
legacyRender(
56+
await actAsync(async () =>
57+
render(
6658
<ClassComponent>
6759
<FunctionComponent />
6860
</ClassComponent>,
69-
document.createElement('div'),
7061
),
7162
);
7263
expect(store).toMatchInlineSnapshot(`
@@ -77,7 +68,7 @@ describe('Store component filters', () => {
7768
<div>
7869
`);
7970

80-
await act(
71+
await actAsync(
8172
async () =>
8273
(store.componentFilters = [
8374
utils.createElementTypeFilter(Types.ElementTypeHostComponent),
@@ -89,7 +80,7 @@ describe('Store component filters', () => {
8980
<FunctionComponent>
9081
`);
9182

92-
await act(
83+
await actAsync(
9384
async () =>
9485
(store.componentFilters = [
9586
utils.createElementTypeFilter(Types.ElementTypeClass),
@@ -102,7 +93,7 @@ describe('Store component filters', () => {
10293
<div>
10394
`);
10495

105-
await act(
96+
await actAsync(
10697
async () =>
10798
(store.componentFilters = [
10899
utils.createElementTypeFilter(Types.ElementTypeClass),
@@ -115,7 +106,7 @@ describe('Store component filters', () => {
115106
<div>
116107
`);
117108

118-
await act(
109+
await actAsync(
119110
async () =>
120111
(store.componentFilters = [
121112
utils.createElementTypeFilter(Types.ElementTypeClass, false),
@@ -130,7 +121,7 @@ describe('Store component filters', () => {
130121
<div>
131122
`);
132123

133-
await act(async () => (store.componentFilters = []));
124+
await actAsync(async () => (store.componentFilters = []));
134125
expect(store).toMatchInlineSnapshot(`
135126
[root]
136127
▾ <ClassComponent>
@@ -144,16 +135,14 @@ describe('Store component filters', () => {
144135
it('should ignore invalid ElementTypeRoot filter', async () => {
145136
const Component = () => <div>Hi</div>;
146137

147-
await act(async () =>
148-
legacyRender(<Component />, document.createElement('div')),
149-
);
138+
await actAsync(async () => render(<Component />));
150139
expect(store).toMatchInlineSnapshot(`
151140
[root]
152141
▾ <Component>
153142
<div>
154143
`);
155144

156-
await act(
145+
await actAsync(
157146
async () =>
158147
(store.componentFilters = [
159148
utils.createElementTypeFilter(Types.ElementTypeRoot),
@@ -174,14 +163,13 @@ describe('Store component filters', () => {
174163
const Bar = () => <Text label="bar" />;
175164
const Baz = () => <Text label="baz" />;
176165

177-
await act(async () =>
178-
legacyRender(
166+
await actAsync(async () =>
167+
render(
179168
<React.Fragment>
180169
<Foo />
181170
<Bar />
182171
<Baz />
183172
</React.Fragment>,
184-
document.createElement('div'),
185173
),
186174
);
187175
expect(store).toMatchInlineSnapshot(`
@@ -194,7 +182,7 @@ describe('Store component filters', () => {
194182
<Text>
195183
`);
196184

197-
await act(
185+
await actAsync(
198186
async () =>
199187
(store.componentFilters = [utils.createDisplayNameFilter('Foo')]),
200188
);
@@ -207,7 +195,7 @@ describe('Store component filters', () => {
207195
<Text>
208196
`);
209197

210-
await act(
198+
await actAsync(
211199
async () =>
212200
(store.componentFilters = [utils.createDisplayNameFilter('Ba')]),
213201
);
@@ -219,7 +207,7 @@ describe('Store component filters', () => {
219207
<Text>
220208
`);
221209

222-
await act(
210+
await actAsync(
223211
async () =>
224212
(store.componentFilters = [utils.createDisplayNameFilter('B.z')]),
225213
);
@@ -237,16 +225,14 @@ describe('Store component filters', () => {
237225
it('should filter by path', async () => {
238226
const Component = () => <div>Hi</div>;
239227

240-
await act(async () =>
241-
legacyRender(<Component />, document.createElement('div')),
242-
);
228+
await actAsync(async () => render(<Component />));
243229
expect(store).toMatchInlineSnapshot(`
244230
[root]
245231
▾ <Component>
246232
<div>
247233
`);
248234

249-
await act(
235+
await actAsync(
250236
async () =>
251237
(store.componentFilters = [
252238
utils.createLocationFilter(__filename.replace(__dirname, '')),
@@ -255,7 +241,7 @@ describe('Store component filters', () => {
255241

256242
expect(store).toMatchInlineSnapshot(`[root]`);
257243

258-
await act(
244+
await actAsync(
259245
async () =>
260246
(store.componentFilters = [
261247
utils.createLocationFilter('this:is:a:made:up:path'),
@@ -277,7 +263,7 @@ describe('Store component filters', () => {
277263
const Bar = () => <Foo />;
278264
Bar.displayName = 'Bar(Foo(Component))';
279265

280-
await act(async () => legacyRender(<Bar />, document.createElement('div')));
266+
await actAsync(async () => render(<Bar />));
281267
expect(store).toMatchInlineSnapshot(`
282268
[root]
283269
▾ <Component> [Bar][Foo]
@@ -286,7 +272,7 @@ describe('Store component filters', () => {
286272
<div>
287273
`);
288274

289-
await act(
275+
await actAsync(
290276
async () => (store.componentFilters = [utils.createHOCFilter(true)]),
291277
);
292278
expect(store).toMatchInlineSnapshot(`
@@ -295,7 +281,7 @@ describe('Store component filters', () => {
295281
<div>
296282
`);
297283

298-
await act(
284+
await actAsync(
299285
async () => (store.componentFilters = [utils.createHOCFilter(false)]),
300286
);
301287
expect(store).toMatchInlineSnapshot(`
@@ -309,29 +295,29 @@ describe('Store component filters', () => {
309295

310296
// @reactVersion >= 16.0
311297
it('should not send a bridge update if the set of enabled filters has not changed', async () => {
312-
await act(
298+
await actAsync(
313299
async () => (store.componentFilters = [utils.createHOCFilter(true)]),
314300
);
315301

316302
bridge.addListener('updateComponentFilters', componentFilters => {
317303
throw Error('Unexpected component update');
318304
});
319305

320-
await act(
306+
await actAsync(
321307
async () =>
322308
(store.componentFilters = [
323309
utils.createHOCFilter(false),
324310
utils.createHOCFilter(true),
325311
]),
326312
);
327-
await act(
313+
await actAsync(
328314
async () =>
329315
(store.componentFilters = [
330316
utils.createHOCFilter(true),
331317
utils.createLocationFilter('abc', false),
332318
]),
333319
);
334-
await act(
320+
await actAsync(
335321
async () =>
336322
(store.componentFilters = [
337323
utils.createHOCFilter(true),
@@ -363,29 +349,22 @@ describe('Store component filters', () => {
363349
utils.createElementTypeFilter(Types.ElementTypeSuspense),
364350
];
365351

366-
const container = document.createElement('div');
367-
await act(async () =>
368-
legacyRender(<Wrapper shouldSuspend={true} />, container),
369-
);
352+
await actAsync(async () => render(<Wrapper shouldSuspend={true} />));
370353
expect(store).toMatchInlineSnapshot(`
371354
[root]
372355
▾ <Wrapper>
373356
▾ <Loading>
374357
<div>
375358
`);
376359

377-
await act(async () =>
378-
legacyRender(<Wrapper shouldSuspend={false} />, container),
379-
);
360+
await actAsync(async () => render(<Wrapper shouldSuspend={false} />));
380361
expect(store).toMatchInlineSnapshot(`
381362
[root]
382363
▾ <Wrapper>
383364
<Component>
384365
`);
385366

386-
await act(async () =>
387-
legacyRender(<Wrapper shouldSuspend={true} />, container),
388-
);
367+
await actAsync(async () => render(<Wrapper shouldSuspend={true} />));
389368
expect(store).toMatchInlineSnapshot(`
390369
[root]
391370
▾ <Wrapper>
@@ -411,37 +390,28 @@ describe('Store component filters', () => {
411390
return null;
412391
}
413392

414-
// HACK This require() is needed (somewhere in the test) for this case to pass.
415-
// Without it, the legacyRender() call below causes this test to fail
416-
// because it requires "react-dom" for the first time,
417-
// which causes the console error() and warn() methods to be overridden again,
418-
// effectively disconnecting the DevTools override in 'react-devtools-shared/src/backend/console'.
419-
require('react-dom');
420-
421-
const container = document.createElement('div');
422-
await act(
393+
await actAsync(
423394
async () =>
424395
(store.componentFilters = [
425396
utils.createDisplayNameFilter('Warning'),
426397
utils.createDisplayNameFilter('Error'),
427398
]),
428399
);
429400
utils.withErrorsOrWarningsIgnored(['test-only:'], () => {
430-
legacyRender(
401+
render(
431402
<React.Fragment>
432403
<ComponentWithError />
433404
<ComponentWithWarning />
434405
<ComponentWithWarningAndError />
435406
</React.Fragment>,
436-
container,
437407
);
438408
});
439409

440410
expect(store).toMatchInlineSnapshot(``);
441411
expect(store.errorCount).toBe(0);
442412
expect(store.warningCount).toBe(0);
443413

444-
await act(async () => (store.componentFilters = []));
414+
await actAsync(async () => (store.componentFilters = []));
445415
expect(store).toMatchInlineSnapshot(`
446416
✕ 2, ⚠ 2
447417
[root]
@@ -450,7 +420,7 @@ describe('Store component filters', () => {
450420
<ComponentWithWarningAndError> ✕⚠
451421
`);
452422

453-
await act(
423+
await actAsync(
454424
async () =>
455425
(store.componentFilters = [utils.createDisplayNameFilter('Warning')]),
456426
);
@@ -460,7 +430,7 @@ describe('Store component filters', () => {
460430
<ComponentWithError> ✕
461431
`);
462432

463-
await act(
433+
await actAsync(
464434
async () =>
465435
(store.componentFilters = [utils.createDisplayNameFilter('Error')]),
466436
);
@@ -470,7 +440,7 @@ describe('Store component filters', () => {
470440
<ComponentWithWarning> ⚠
471441
`);
472442

473-
await act(
443+
await actAsync(
474444
async () =>
475445
(store.componentFilters = [
476446
utils.createDisplayNameFilter('Warning'),
@@ -481,7 +451,7 @@ describe('Store component filters', () => {
481451
expect(store.errorCount).toBe(0);
482452
expect(store.warningCount).toBe(0);
483453

484-
await act(async () => (store.componentFilters = []));
454+
await actAsync(async () => (store.componentFilters = []));
485455
expect(store).toMatchInlineSnapshot(`
486456
✕ 2, ⚠ 2
487457
[root]

0 commit comments

Comments
 (0)