using the wrong renderer's act() should warn

fixtures/act/src/index.test.js

@@ -11,7 +11,7 @@ beforeEach(() => {
 function confirmWarning() {
   expect(spy).toHaveBeenCalledWith(
     expect.stringContaining(
-      "It looks like you're using the wrong act() around your interactions."
+      "It looks like you're using the wrong act() around your test interactions."
     ),
     ''
   );

packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js

@@ -225,13 +225,13 @@ describe('ReactTestUtils.act()', () => {
     it('warns if you return a value inside act', () => {
       expect(() => act(() => null)).toWarnDev(
         [
-          'The callback passed to act(...) function must return undefined, or a Promise.',
+          'The callback passed to act(...) function must return undefined or a Promise.',
         ],
         {withoutStack: true},
       );
       expect(() => act(() => 123)).toWarnDev(
         [
-          'The callback passed to act(...) function must return undefined, or a Promise.',
+          'The callback passed to act(...) function must return undefined or a Promise.',
         ],
         {withoutStack: true},
       );
@@ -240,7 +240,7 @@ describe('ReactTestUtils.act()', () => {
     it('warns if you try to await an .act call', () => {
       expect(() => act(() => {}).then(() => {})).toWarnDev(
         [
-          'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
+          'Do not await the result of calling a synchronous act(...), it is not a Promise.',
         ],
         {withoutStack: true},
       );
@@ -306,7 +306,7 @@ describe('ReactTestUtils.act()', () => {
       if (__DEV__) {
         expect(console.error.calls.count()).toEqual(1);
         expect(console.error.calls.argsFor(0)[0]).toMatch(
-          'You called act(async () => ...) without await.',
+          'You called act(async () => ...) without awaiting its result.',
         );
       }
     });

packages/react-dom/src/test-utils/ReactTestUtilsAct.js

@@ -103,9 +103,11 @@ function act(callback: () => Thenable) {
             if (called === false) {
               warningWithoutStack(
                 null,
-                'You called act(async () => ...) without await. ' +
+                'You called act(async () => ...) without awaiting its result. ' +
                   'This could lead to unexpected testing behaviour, interleaving multiple act ' +
-                  'calls and mixing their scopes. You should - await act(async () => ...);',
+                  'calls and mixing their scopes. You should await asynchronous act() ' +
+                  'calls, like so -\n' +
+                  'await act(async () => ...);\n',
               );
             }
           });
@@ -141,7 +143,7 @@ function act(callback: () => Thenable) {
       warningWithoutStack(
         result === undefined,
         'The callback passed to act(...) function ' +
-          'must return undefined, or a Promise. You returned %s',
+          'must return undefined or a Promise. You returned %s',
         result,
       );
     }
@@ -161,7 +163,8 @@ function act(callback: () => Thenable) {
         if (__DEV__) {
           warningWithoutStack(
             false,
-            'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
+            'Do not await the result of calling a synchronous act(...), it is not a Promise. \n' +
+              'Remove the `await` statement before this act() call.',
           );
         }
         resolve();

packages/react-noop-renderer/src/createReactNoop.js

@@ -716,9 +716,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
               if (called === false) {
                 warningWithoutStack(
                   null,
-                  'You called act(async () => ...) without await. ' +
+                  'You called act(async () => ...) without awaiting its result. ' +
                     'This could lead to unexpected testing behaviour, interleaving multiple act ' +
-                    'calls and mixing their scopes. You should - await act(async () => ...);',
+                    'calls and mixing their scopes. You should await asynchronous act() ' +
+                    'calls, like so -\n' +
+                    'await act(async () => ...);\n',
                 );
               }
             });
@@ -754,7 +756,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         warningWithoutStack(
           result === undefined,
           'The callback passed to act(...) function ' +
-            'must return undefined, or a Promise. You returned %s',
+            'must return undefined or a Promise. You returned %s',
           result,
         );
       }
@@ -774,7 +776,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           if (__DEV__) {
             warningWithoutStack(
               false,
-              'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
+              'Do not await the result of calling a synchronous act(...), it is not a Promise. \n' +
+                'Remove the `await` statement before this act() call.',
             );
           }
           resolve();

packages/react-reconciler/src/ReactFiberScheduler.js

@@ -2087,10 +2087,17 @@ export function warnIfNotScopedWithMatchingAct(fiber: Fiber): void {
       // it looks like we're using the wrong matching act(), so log a warning
       warningWithoutStack(
         false,
-        "It looks like you're using the wrong act() around your interactions.\n" +
-          'Be sure to use the matching version of act() corresponding to your renderer. e.g. -\n' +
-          "for react-dom, import {act} from 'react-test-utils';\n" +
-          'for react-test-renderer, const {act} = TestRenderer.' +
+        "It looks like you're using the wrong act() around your test interactions.\n" +
+          'Be sure to use the matching version of act() corresponding to your renderer. e.g. -\n\n' +
+          '// for react-dom:\n' +
+          "import {act} from 'react-test-utils';\n" +
+          '//...\n' +
+          'act(() => ...);\n\n' +
+          '// for react-test-renderer:\n' +
+          "import TestRenderer from 'react-test-renderer';\n" +
+          'const {act} = TestRenderer;\n' +
+          '//...\n' +
+          'act(() => ...);' +
           '%s',
         getStackByFiberInDevAndProd(fiber),
       );
@@ -2115,13 +2122,12 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
         false,
         'An update to %s inside a test was not wrapped in act(...).\n\n' +
           'When testing, code that causes React state updates should be ' +
-          'wrapped into act(...):\n\n' +
-          'act(() => {\n' +
+          'wrapped inside act(...):\n\n' +
+          'await act(async () => {\n' +
           '  /* fire events that update state */\n' +
           '});\n' +
           '/* assert on the output */\n\n' +
-          "This ensures that you're testing the behavior the user would see " +
-          'in the browser.' +
+          "This ensures that you're testing behavior similar to what a user would experience.\n" +
           ' Learn more at https://fb.me/react-wrap-tests-with-act' +
           '%s',
         getComponentName(fiber.type),

packages/react-test-renderer/src/ReactTestRendererAct.js

@@ -84,9 +84,11 @@ function act(callback: () => Thenable) {
             if (called === false) {
               warningWithoutStack(
                 null,
-                'You called act(async () => ...) without await. ' +
+                'You called act(async () => ...) without awaiting its result. ' +
                   'This could lead to unexpected testing behaviour, interleaving multiple act ' +
-                  'calls and mixing their scopes. You should - await act(async () => ...);',
+                  'calls and mixing their scopes. You should await asynchronous act() ' +
+                  'calls, like so -\n' +
+                  'await act(async () => ...);\n',
               );
             }
           });
@@ -122,7 +124,7 @@ function act(callback: () => Thenable) {
       warningWithoutStack(
         result === undefined,
         'The callback passed to act(...) function ' +
-          'must return undefined, or a Promise. You returned %s',
+          'must return undefined or a Promise. You returned %s',
         result,
       );
     }
@@ -142,7 +144,8 @@ function act(callback: () => Thenable) {
         if (__DEV__) {
           warningWithoutStack(
             false,
-            'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
+            'Do not await the result of calling a synchronous act(...), it is not a Promise. \n' +
+              'Remove the `await` statement before this act() call.',
           );
         }
         resolve();