update native test

facebook · Sep 21, 2021 · 20c2799 · 20c2799
1 parent 80f6fff
commit 20c2799
Showing 1 changed file with 90 additions and 4 deletions.
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreNative-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreNative-test.js
@@ -14,7 +14,8 @@
 let React;
 let ReactNoop;
 let Scheduler;
-let useSyncExternalStoreNative;
+let useSyncExternalStore;
+let useSyncExternalStoreExtra;
 let act;
 
 // This tests the userspace shim of `useSyncExternalStore` in a server-rendering
@@ -42,12 +43,18 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
       return otherExports;
     });
 
+    jest.mock('use-sync-external-store', () =>
+      jest.requireActual('use-sync-external-store/index.native'),
+    );
+
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
     act = require('jest-react').act;
-    useSyncExternalStoreNative = require('use-sync-external-store/index.native')
+    useSyncExternalStore = require('use-sync-external-store')
       .useSyncExternalStore;
+    useSyncExternalStoreExtra = require('use-sync-external-store/extra')
+      .useSyncExternalStoreExtra;
   });
 
   function Text({text}) {
@@ -61,7 +68,7 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
     return {
       set(text) {
         currentState = text;
-        ReactDOM.unstable_batchedUpdates(() => {
+        ReactNoop.batchedUpdates(() => {
           listeners.forEach(listener => listener());
         });
       },
@@ -82,7 +89,27 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
     const store = createExternalStore('client');
 
     function App() {
-      const text = useSyncExternalStoreNative(
+      const text = useSyncExternalStore(
+        store.subscribe,
+        store.getState,
+        () => 'server',
+      );
+      return <Text text={text} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['client']);
+    expect(root).toMatchRenderedOutput('client');
+  });
+
+  test('native version', async () => {
+    const store = createExternalStore('client');
+
+    function App() {
+      const text = useSyncExternalStore(
         store.subscribe,
         store.getState,
         () => 'server',
@@ -97,4 +124,63 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
     expect(Scheduler).toHaveYielded(['client']);
     expect(root).toMatchRenderedOutput('client');
   });
+
+  // @gate !(enableUseRefAccessWarning && __DEV__)
+  test('Using isEqual to bailout', async () => {
+    const store = createExternalStore({a: 0, b: 0});
+
+    function A() {
+      const {a} = useSyncExternalStoreExtra(
+        store.subscribe,
+        store.getState,
+        null,
+        state => ({a: state.a}),
+        (state1, state2) => state1.a === state2.a,
+      );
+      return <Text text={'A' + a} />;
+    }
+    function B() {
+      const {b} = useSyncExternalStoreExtra(
+        store.subscribe,
+        store.getState,
+        null,
+        state => {
+          return {b: state.b};
+        },
+        (state1, state2) => state1.b === state2.b,
+      );
+      return <Text text={'B' + b} />;
+    }
+
+    function App() {
+      return (
+        <>
+          <A />
+          <B />
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    act(() => root.render(<App />));
+
+    expect(Scheduler).toHaveYielded(['A0', 'B0']);
+    expect(root).toMatchRenderedOutput('A0B0');
+
+    // Update b but not a
+    await act(() => {
+      store.set({a: 0, b: 1});
+    });
+    // Only b re-renders
+    expect(Scheduler).toHaveYielded(['B1']);
+    expect(root).toMatchRenderedOutput('A0B1');
+
+    // Update a but not b
+    await act(() => {
+      store.set({a: 1, b: 1});
+    });
+    // Only a re-renders
+    expect(Scheduler).toHaveYielded(['A1']);
+    expect(root).toMatchRenderedOutput('A1B1');
+  });
 });