Fix useSyncExternalStoreShared-test.js

packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js

@@ -143,7 +143,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     };
   }
 
-  test('basic usage', async () => {
+  it('basic usage', async () => {
     const store = createExternalStore('Initial');
 
     function App() {
@@ -165,7 +165,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(container.textContent).toEqual('Updated');
   });
 
-  test('skips re-rendering if nothing changes', async () => {
+  it('skips re-rendering if nothing changes', async () => {
     const store = createExternalStore('Initial');
 
     function App() {
@@ -189,7 +189,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(container.textContent).toEqual('Initial');
   });
 
-  test('switch to a different store', async () => {
+  it('switch to a different store', async () => {
     const storeA = createExternalStore(0);
     const storeB = createExternalStore(0);
 
@@ -242,7 +242,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(container.textContent).toEqual('1');
   });
 
-  test('selecting a specific value inside getSnapshot', async () => {
+  it('selecting a specific value inside getSnapshot', async () => {
     const store = createExternalStore({a: 0, b: 0});
 
     function A() {
@@ -290,7 +290,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
   // In React 18, you can't observe in between a sync render and its
   // passive effects, so this is only relevant to legacy roots
   // @gate enableUseSyncExternalStoreShim
-  test(
+  it(
     "compares to current state before bailing out, even when there's a " +
       'mutation in between the sync and passive effects',
     async () => {
@@ -334,7 +334,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     },
   );
 
-  test('mutating the store in between render and commit when getSnapshot has changed', async () => {
+  it('mutating the store in between render and commit when getSnapshot has changed', async () => {
     const store = createExternalStore({a: 1, b: 1});
 
     const getSnapshotA = () => store.getState().a;
@@ -394,7 +394,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(container.textContent).toEqual('B2');
   });
 
-  test('mutating the store in between render and commit when getSnapshot has _not_ changed', async () => {
+  it('mutating the store in between render and commit when getSnapshot has _not_ changed', async () => {
     // Same as previous test, but `getSnapshot` does not change
     const store = createExternalStore({a: 1, b: 1});
 
@@ -453,7 +453,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(container.textContent).toEqual('A1');
   });
 
-  test("does not bail out if the previous update hasn't finished yet", async () => {
+  it("does not bail out if the previous update hasn't finished yet", async () => {
     const store = createExternalStore(0);
 
     function Child1() {
@@ -492,7 +492,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(container.textContent).toEqual('00');
   });
 
-  test('uses the latest getSnapshot, even if it changed in the same batch as a store update', async () => {
+  it('uses the latest getSnapshot, even if it changed in the same batch as a store update', async () => {
     const store = createExternalStore({a: 0, b: 0});
 
     const getSnapshotA = () => store.getState().a;
@@ -523,7 +523,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(container.textContent).toEqual('2');
   });
 
-  test('handles errors thrown by getSnapshot', async () => {
+  it('handles errors thrown by getSnapshot', async () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
       static getDerivedStateFromError(error) {
@@ -568,23 +568,41 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(container.textContent).toEqual('0');
 
     // Update that throws in a getSnapshot. We can catch it with an error boundary.
-    await act(() => {
-      store.set({value: 1, throwInGetSnapshot: true, throwInIsEqual: false});
-    });
-    if (gate(flags => !flags.enableUseSyncExternalStoreShim)) {
-      assertLog([
-        'Error in getSnapshot',
-        // In a concurrent root, React renders a second time to attempt to
-        // recover from the error.
-        'Error in getSnapshot',
-      ]);
+    if (__DEV__ && gate(flags => flags.enableUseSyncExternalStoreShim)) {
+      // In 17, the error is re-thrown in DEV.
+      await expect(async () => {
+        await act(() => {
+          store.set({
+            value: 1,
+            throwInGetSnapshot: true,
+            throwInIsEqual: false,
+          });
+        });
+      }).rejects.toThrow('Error in getSnapshot');
     } else {
-      assertLog(['Error in getSnapshot']);
+      await act(() => {
+        store.set({
+          value: 1,
+          throwInGetSnapshot: true,
+          throwInIsEqual: false,
+        });
+      });
     }
+
+    assertLog(
+      gate(flags => flags.enableUseSyncExternalStoreShim)
+        ? ['Error in getSnapshot']
+        : [
+            'Error in getSnapshot',
+            // In a concurrent root, React renders a second time to attempt to
+            // recover from the error.
+            'Error in getSnapshot',
+          ],
+    );
     expect(container.textContent).toEqual('Error in getSnapshot');
   });
 
-  test('Infinite loop if getSnapshot keeps returning new reference', async () => {
+  it('Infinite loop if getSnapshot keeps returning new reference', async () => {
     const store = createExternalStore({});
 
     function App() {
@@ -608,7 +626,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     }).toErrorDev(
       gate(flags => flags.enableUseSyncExternalStoreShim)
         ? [
-            'Uncaught [',
+            'Maximum update depth exceeded. ',
             'The result of getSnapshot should be cached to avoid an infinite loop',
             'The above error occurred in the',
           ]
@@ -627,7 +645,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     );
   });
 
-  test('getSnapshot can return NaN without infinite loop warning', async () => {
+  it('getSnapshot can return NaN without infinite loop warning', async () => {
     const store = createExternalStore('not a number');
 
     function App() {
@@ -657,7 +675,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
   describe('extra features implemented in user-space', () => {
     // The selector implementation uses the lazy ref initialization pattern
     // @gate !(enableUseRefAccessWarning && __DEV__)
-    test('memoized selectors are only called once per update', async () => {
+    it('memoized selectors are only called once per update', async () => {
       const store = createExternalStore({a: 0, b: 0});
 
       function selector(state) {
@@ -700,7 +718,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
     // The selector implementation uses the lazy ref initialization pattern
     // @gate !(enableUseRefAccessWarning && __DEV__)
-    test('Using isEqual to bailout', async () => {
+    it('Using isEqual to bailout', async () => {
       const store = createExternalStore({a: 0, b: 0});
 
       function A() {
@@ -759,7 +777,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       expect(container.textContent).toEqual('A1B1');
     });
 
-    test('basic server hydration', async () => {
+    it('basic server hydration', async () => {
       const store = createExternalStore('client');
 
       const ref = React.createRef();
@@ -812,7 +830,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     });
   });
 
-  test('regression test for #23150', async () => {
+  it('regression test for #23150', async () => {
     const store = createExternalStore('Initial');
 
     function App() {
@@ -841,7 +859,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
   // The selector implementation uses the lazy ref initialization pattern
   // @gate !(enableUseRefAccessWarning && __DEV__)
-  test('compares selection to rendered selection even if selector changes', async () => {
+  it('compares selection to rendered selection even if selector changes', async () => {
     const store = createExternalStore({items: ['A', 'B']});
 
     const shallowEqualArray = (a, b) => {
@@ -960,15 +978,31 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
       expect(container.textContent).toEqual('A');
 
-      await expect(async () => {
-        await act(() => {
-          store.set({});
-        });
-      }).toWarnDev(
-        ReactFeatureFlags.enableUseRefAccessWarning
-          ? ['Warning: App: Unsafe read of a mutable value during render.']
-          : [],
-      );
+      if (__DEV__ && gate(flags => flags.enableUseSyncExternalStoreShim)) {
+        // In 17, the error is re-thrown in DEV.
+        await expect(async () => {
+          await expect(async () => {
+            await act(() => {
+              store.set({});
+            });
+          }).rejects.toThrow('Malformed state');
+        }).toWarnDev(
+          ReactFeatureFlags.enableUseRefAccessWarning
+            ? ['Warning: App: Unsafe read of a mutable value during render.']
+            : [],
+        );
+      } else {
+        await expect(async () => {
+          await act(() => {
+            store.set({});
+          });
+        }).toWarnDev(
+          ReactFeatureFlags.enableUseRefAccessWarning
+            ? ['Warning: App: Unsafe read of a mutable value during render.']
+            : [],
+        );
+      }
+
       expect(container.textContent).toEqual('Malformed state');
     });
 
@@ -1005,15 +1039,31 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
       expect(container.textContent).toEqual('A');
 
-      await expect(async () => {
-        await act(() => {
-          store.set({});
-        });
-      }).toWarnDev(
-        ReactFeatureFlags.enableUseRefAccessWarning
-          ? ['Warning: App: Unsafe read of a mutable value during render.']
-          : [],
-      );
+      if (__DEV__ && gate(flags => flags.enableUseSyncExternalStoreShim)) {
+        // In 17, the error is re-thrown in DEV.
+        await expect(async () => {
+          await expect(async () => {
+            await act(() => {
+              store.set({});
+            });
+          }).rejects.toThrow('Malformed state');
+        }).toWarnDev(
+          ReactFeatureFlags.enableUseRefAccessWarning
+            ? ['Warning: App: Unsafe read of a mutable value during render.']
+            : [],
+        );
+      } else {
+        await expect(async () => {
+          await act(() => {
+            store.set({});
+          });
+        }).toWarnDev(
+          ReactFeatureFlags.enableUseRefAccessWarning
+            ? ['Warning: App: Unsafe read of a mutable value during render.']
+            : [],
+        );
+      }
+
       expect(container.textContent).toEqual('Malformed state');
     });
   });