runActTests() — react Function Reference

Architecture documentation for the runActTests() function in ReactTestUtilsAct-test.js from the react codebase.

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ runActTests() — react Function Reference

Dependency Diagram

graph TD
  036dbf00_5ff1_7e32_e85a_07d17ec42c83["runActTests()"]
  9462060a_d55f_3b24_fb6b_8993720c9d20["ReactTestUtilsAct-test.js"]
  036dbf00_5ff1_7e32_e85a_07d17ec42c83 -->|defined in| 9462060a_d55f_3b24_fb6b_8993720c9d20
  483bb056_b2bb_7c65_d726_6720452ac10d["sleep()"]
  036dbf00_5ff1_7e32_e85a_07d17ec42c83 -->|calls| 483bb056_b2bb_7c65_d726_6720452ac10d
  style 036dbf00_5ff1_7e32_e85a_07d17ec42c83 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js lines 81–783

function runActTests(render, unmount, rerender) {
  describe('concurrent render', () => {
    beforeEach(() => {
      jest.resetModules();
      React = require('react');
      ReactDOMClient = require('react-dom/client');
      Scheduler = require('scheduler');
      act = React.act;

      const InternalTestUtils = require('internal-test-utils');
      assertLog = InternalTestUtils.assertLog;
      assertConsoleErrorDev = InternalTestUtils.assertConsoleErrorDev;

      container = document.createElement('div');
      document.body.appendChild(container);
    });

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

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

        act(() => {
          render(<App />, container);
        });

        assertLog([100]);
      });

      // @gate __DEV__
      it('flushes effects on every call', async () => {
        function App() {
          const [ctr, setCtr] = React.useState(0);
          React.useEffect(() => {
            Scheduler.log(ctr);
          });
          return (
            <button id="button" onClick={() => setCtr(x => x + 1)}>
              {ctr}
            </button>
          );
        }

        act(() => {
          render(<App />, container);
        });
        assertLog([0]);
        const button = container.querySelector('#button');
        function click() {
          button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
        }

        await act(async () => {
          click();
          click();
          click();
        });
        // it consolidates the 3 updates, then fires the effect
        assertLog([3]);
        await act(async () => click());
        assertLog([4]);
        await act(async () => click());
        assertLog([5]);
        expect(button.innerHTML).toBe('5');
      });

      // @gate __DEV__
      it("should keep flushing effects until they're done", () => {
        function App() {
          const [ctr, setCtr] = React.useState(0);
          React.useEffect(() => {