/
ReactDOMSafariMicrotaskBug-test.js
100 lines (90 loc) · 2.44 KB
/
ReactDOMSafariMicrotaskBug-test.js
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @emails react-core
*/
'use strict';
let React;
let ReactDOMClient;
let act;
describe('ReactDOMSafariMicrotaskBug-test', () => {
let container;
let flushMicrotasksPrematurely;
beforeEach(() => {
// In Safari, microtasks don't always run on clean stack.
// This setup crudely approximates it.
// In reality, the sync flush happens when an iframe is added to the page.
// https://github.com/facebook/react/issues/22459
let queue = [];
window.queueMicrotask = function(cb) {
queue.push(cb);
};
flushMicrotasksPrematurely = function() {
while (queue.length > 0) {
const prevQueue = queue;
queue = [];
prevQueue.forEach(cb => cb());
}
};
jest.resetModules();
container = document.createElement('div');
React = require('react');
ReactDOMClient = require('react-dom/client');
act = require('jest-react').act;
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
});
it('should deal with premature microtask in commit phase', async () => {
let ran = false;
function Foo() {
const [state, setState] = React.useState(0);
return (
<div
ref={() => {
if (!ran) {
ran = true;
setState(1);
flushMicrotasksPrematurely();
}
}}>
{state}
</div>
);
}
const root = ReactDOMClient.createRoot(container);
await act(async () => {
root.render(<Foo />);
});
expect(container.textContent).toBe('1');
});
it('should deal with premature microtask in event handler', async () => {
function Foo() {
const [state, setState] = React.useState(0);
return (
<button
onClick={() => {
setState(1);
flushMicrotasksPrematurely();
}}>
{state}
</button>
);
}
const root = ReactDOMClient.createRoot(container);
await act(async () => {
root.render(<Foo />);
});
expect(container.textContent).toBe('0');
await act(async () => {
container.firstChild.dispatchEvent(
new MouseEvent('click', {bubbles: true}),
);
});
expect(container.textContent).toBe('1');
});
});