assert console cleared before act

Author: rickhanlonii

packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js

@@ -308,9 +308,8 @@ describe('ReactInternalTestUtils console mocks', () => {
   });
 });
 
-// Helper methods avoids invalid toWarn().toThrow() nesting
-// See no-to-warn-dev-within-to-throw
-const expectToWarnAndToThrow = (expectBlock, expectedErrorMessage) => {
+// Helper method to capture assertion failure.
+const expectToWarnAndToThrow = expectBlock => {
   let caughtError;
   try {
     expectBlock();
@@ -321,6 +320,18 @@ const expectToWarnAndToThrow = (expectBlock, expectedErrorMessage) => {
   return stripAnsi(caughtError.message);
 };
 
+// Helper method to capture assertion failure with act.
+const awaitExpectToWarnAndToThrow = async expectBlock => {
+  let caughtError;
+  try {
+    await expectBlock();
+  } catch (error) {
+    caughtError = error;
+  }
+  expect(caughtError).toBeDefined();
+  return stripAnsi(caughtError.message);
+};
+
 describe('ReactInternalTestUtils console assertions', () => {
   beforeEach(() => {
     jest.resetAllMocks();
@@ -346,6 +357,44 @@ describe('ReactInternalTestUtils console assertions', () => {
       assertConsoleLogDev(['Hello', 'Good day', 'Bye']);
     });
 
+    it('fails if act is called without assertConsoleLogDev', async () => {
+      const Yield = ({id}) => {
+        console.log(id);
+        return id;
+      };
+
+      function App() {
+        return (
+          <div>
+            <Yield id="A" />
+            <Yield id="B" />
+            <Yield id="C" />
+          </div>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App />);
+      });
+      const message = await awaitExpectToWarnAndToThrow(async () => {
+        await act(() => {
+          root.render(<App />);
+        });
+      });
+
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.log was called without assertConsoleLogDev:
+        + A
+        + B
+        + C
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+    });
+
     // @gate __DEV__
     it('fails if first expected log is not included', () => {
       const message = expectToWarnAndToThrow(() => {
@@ -648,6 +697,44 @@ describe('ReactInternalTestUtils console assertions', () => {
       assertConsoleWarnDev(['Hello', 'Good day', 'Bye'], {withoutStack: 1});
     });
 
+    it('fails if act is called without assertConsoleWarnDev', async () => {
+      const Yield = ({id}) => {
+        console.warn(id);
+        return id;
+      };
+
+      function App() {
+        return (
+          <div>
+            <Yield id="A" />
+            <Yield id="B" />
+            <Yield id="C" />
+          </div>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App />);
+      });
+      const message = await awaitExpectToWarnAndToThrow(async () => {
+        await act(() => {
+          root.render(<App />);
+        });
+      });
+
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.warn was called without assertConsoleWarnDev:
+        + A
+        + B
+        + C
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+    });
+
     // @gate __DEV__
     it('fails if first expected warning is not included', () => {
       const message = expectToWarnAndToThrow(() => {
@@ -1143,6 +1230,94 @@ describe('ReactInternalTestUtils console assertions', () => {
       assertConsoleErrorDev(['Hello', 'Good day', 'Bye'], {withoutStack: 1});
     });
 
+    it('fails if act is called without assertConsoleErrorDev', async () => {
+      const Yield = ({id}) => {
+        console.error(id);
+        return id;
+      };
+
+      function App() {
+        return (
+          <div>
+            <Yield id="A" />
+            <Yield id="B" />
+            <Yield id="C" />
+          </div>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App />);
+      });
+      const message = await awaitExpectToWarnAndToThrow(async () => {
+        await act(() => {
+          root.render(<App />);
+        });
+      });
+
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.error was called without assertConsoleErrorDev:
+        + A
+        + B
+        + C
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+    });
+
+    it('fails if act is called without any assertConsoleDev helpers', async () => {
+      const Yield = ({id}) => {
+        console.log(id);
+        console.warn(id);
+        console.error(id);
+        return id;
+      };
+
+      function App() {
+        return (
+          <div>
+            <Yield id="A" />
+            <Yield id="B" />
+            <Yield id="C" />
+          </div>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(() => {
+        root.render(<App />);
+      });
+      const message = await awaitExpectToWarnAndToThrow(async () => {
+        await act(() => {
+          root.render(<App />);
+        });
+      });
+
+      expect(message).toMatchInlineSnapshot(`
+        "asserConsoleLogsCleared(expected)
+
+        console.log was called without assertConsoleLogDev:
+        + A
+        + B
+        + C
+
+        console.warn was called without assertConsoleWarnDev:
+        + A
+        + B
+        + C
+
+        console.error was called without assertConsoleErrorDev:
+        + A
+        + B
+        + C
+
+        You must call one of the assertConsoleDev helpers between each act call."
+      `);
+    });
+
     // @gate __DEV__
     it('fails if first expected error is not included', () => {
       const message = expectToWarnAndToThrow(() => {

packages/internal-test-utils/consoleMock.js

@@ -182,6 +182,53 @@ export function clearErrors() {
   return errors;
 }
 
+export function assertConsoleLogsCleared() {
+  const logs = clearLogs();
+  const warnings = clearWarnings();
+  const errors = clearErrors();
+
+  if (logs.length > 0 || errors.length > 0 || warnings.length > 0) {
+    let message = `${chalk.dim('asserConsoleLogsCleared')}(${chalk.red(
+      'expected',
+    )})\n`;
+
+    if (logs.length > 0) {
+      message += `\nconsole.log was called without assertConsoleLogDev:\n${diff(
+        '',
+        logs.join('\n'),
+        {
+          omitAnnotationLines: true,
+        },
+      )}\n`;
+    }
+
+    if (warnings.length > 0) {
+      message += `\nconsole.warn was called without assertConsoleWarnDev:\n${diff(
+        '',
+        warnings.join('\n'),
+        {
+          omitAnnotationLines: true,
+        },
+      )}\n`;
+    }
+    if (errors.length > 0) {
+      message += `\nconsole.error was called without assertConsoleErrorDev:\n${diff(
+        '',
+        errors.join('\n'),
+        {
+          omitAnnotationLines: true,
+        },
+      )}\n`;
+    }
+
+    message += `\nYou must call one of the assertConsoleDev helpers between each act call.`;
+
+    const error = Error(message);
+    Error.captureStackTrace(error, assertConsoleLogsCleared);
+    throw error;
+  }
+}
+
 function replaceComponentStack(str) {
   if (typeof str !== 'string') {
     return str;

packages/internal-test-utils/internalAct.js

@@ -19,6 +19,7 @@ import type {Thenable} from 'shared/ReactTypes';
 import * as Scheduler from 'scheduler/unstable_mock';
 
 import enqueueTask from './enqueueTask';
+import {assertConsoleLogsCleared} from './consoleMock';
 
 export let actingUpdatesScopeDepth: number = 0;
 
@@ -45,6 +46,10 @@ export async function act<T>(scope: () => Thenable<T>): Thenable<T> {
     );
   }
 
+  // We require every `act` call to assert console logs
+  // with one of the assertion helpers. Fails if not empty.
+  assertConsoleLogsCleared();
+
   // $FlowFixMe[cannot-resolve-name]: Flow doesn't know about global Jest object
   if (!jest.isMockFunction(setTimeout)) {
     throw Error(