Skip to content

Commit

Permalink
Use createRoot in ReactTestUtilsActUnmockedScheduler-test (#28086)
Browse files Browse the repository at this point in the history
  • Loading branch information
jackpope authored and gaearon committed Feb 3, 2024
1 parent c9c1063 commit 216031e
Showing 1 changed file with 29 additions and 27 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@
// sanity tests to make sure act() works without a mocked scheduler

let React;
let ReactDOM;
let ReactDOMClient;
let act;
let container;
let yields;
let prevActGlobal;

function clearLog() {
try {
Expand All @@ -23,48 +24,43 @@ function clearLog() {
}
}

function render(el, dom) {
ReactDOM.render(el, dom);
}

function unmount(dom) {
ReactDOM.unmountComponentAtNode(dom);
}

beforeEach(() => {
prevActGlobal = global.IS_REACT_ACT_ENVIRONMENT;
global.IS_REACT_ACT_ENVIRONMENT = true;
jest.resetModules();
jest.unmock('scheduler');
yields = [];
React = require('react');
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
act = React.unstable_act;
container = document.createElement('div');
document.body.appendChild(container);
});

afterEach(() => {
unmount(container);
global.IS_REACT_ACT_ENVIRONMENT = prevActGlobal;
document.body.removeChild(container);
});

// @gate __DEV__
it('can use act to flush effects', () => {
it('can use act to flush effects', async () => {
function App() {
React.useEffect(() => {
yields.push(100);
});
return null;
}

act(() => {
render(<App />, container);
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<App />);
});

expect(clearLog()).toEqual([100]);
});

// @gate __DEV__
it('flushes effects on every call', () => {
it('flushes effects on every call', async () => {
function App() {
const [ctr, setCtr] = React.useState(0);
React.useEffect(() => {
Expand All @@ -77,8 +73,9 @@ it('flushes effects on every call', () => {
);
}

act(() => {
render(<App />, container);
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<App />);
});

expect(clearLog()).toEqual([0]);
Expand All @@ -103,7 +100,7 @@ it('flushes effects on every call', () => {
});

// @gate __DEV__
it("should keep flushing effects until they're done", () => {
it("should keep flushing effects until they're done", async () => {
function App() {
const [ctr, setCtr] = React.useState(0);
React.useEffect(() => {
Expand All @@ -114,25 +111,27 @@ it("should keep flushing effects until they're done", () => {
return ctr;
}

act(() => {
render(<App />, container);
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<App />);
});

expect(container.innerHTML).toEqual('5');
});

// @gate __DEV__
it('should flush effects only on exiting the outermost act', () => {
it('should flush effects only on exiting the outermost act', async () => {
function App() {
React.useEffect(() => {
yields.push(0);
});
return null;
}
const root = ReactDOMClient.createRoot(container);
// let's nest a couple of act() calls
act(() => {
act(() => {
render(<App />, container);
await act(async () => {
await act(() => {
root.render(<App />);
});
// the effect wouldn't have yielded yet because
// we're still inside an act() scope
Expand All @@ -150,7 +149,9 @@ it('can handle cascading promises', async () => {
const [state, setState] = React.useState(0);
async function ticker() {
await null;
setState(x => x + 1);
await act(() => {
setState(x => x + 1);
});
}
React.useEffect(() => {
yields.push(state);
Expand All @@ -159,8 +160,9 @@ it('can handle cascading promises', async () => {
return state;
}

await act(async () => {
render(<App />, container);
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<App />);
});
// all 5 ticks present and accounted for
expect(clearLog()).toEqual([0, 1, 2, 3, 4]);
Expand Down

0 comments on commit 216031e

Please sign in to comment.