Update the nested component test for modern times

packages/data/src/components/use-select/test/index.js

@@ -118,8 +118,7 @@ describe( 'useSelect', () => {
  expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'bar' );
  } );
 
- // TODO: this might be impossible to pull off in React 18 without `useSyncExternalStore`
- it( 'avoid calling nested listener after unmounted', async () => {
+ it( 'does not rerender a nested component that is to be unmounted', () => {
  registry.registerStore( 'toggler', {
  reducer: ( state = false, action ) =>
  action.type === 'TOGGLE' ? ! state : state,
@@ -134,16 +133,16 @@ describe( 'useSelect', () => {
  const mapSelect = ( select ) => select( 'toggler' ).get();
 
  const mapSelectChild = jest.fn( mapSelect );
- function Child() {
+ const Child = jest.fn( () => {
  const show = useSelect( mapSelectChild, [] );
  return show ? 'yes' : 'no';
- }
+ } );
 
  const mapSelectParent = jest.fn( mapSelect );
- function Parent() {
+ const Parent = jest.fn( () => {
  const show = useSelect( mapSelectParent, [] );
  return show ? <Child /> : 'none';
- }
+ } );
 
  render(
  <RegistryProvider value={ registry }>
@@ -155,33 +154,32 @@ describe( 'useSelect', () => {
  expect( screen.getByText( 'none' ) ).toBeInTheDocument();
  expect( mapSelectParent ).toHaveBeenCalledTimes( 2 );
  expect( mapSelectChild ).toHaveBeenCalledTimes( 0 );
+ expect( Parent ).toHaveBeenCalledTimes( 1 );
+ expect( Child ).toHaveBeenCalledTimes( 0 );
 
- // act() does batched updates internally, i.e., any scheduled setStates or effects
- // will be executed only after the dispatch finishes. But we want to opt out of
- // batched updates here. We want all the setStates to be done synchronously, as the
- // store listeners are called. The async/await code is a trick to do it: do the
- // dispatch in a different event loop tick, where the batched updates are no longer active.
- await act( async () => {
- await Promise.resolve();
+ act( () => {
  registry.dispatch( 'toggler' ).toggle();
  } );
 
  // Child was rendered and subscribed to the store, as the _second_ subscription.
  expect( screen.getByText( 'yes' ) ).toBeInTheDocument();
  expect( mapSelectParent ).toHaveBeenCalledTimes( 3 );
  expect( mapSelectChild ).toHaveBeenCalledTimes( 2 );
+ expect( Parent ).toHaveBeenCalledTimes( 2 );
+ expect( Child ).toHaveBeenCalledTimes( 1 );
 
- await act( async () => {
- await Promise.resolve();
+ act( () => {
  registry.dispatch( 'toggler' ).toggle();
  } );
 
  // Check that child was unmounted without any extra state update being performed on it.
- // I.e., `mapSelectChild` was never called again, and no "state update on an unmounted
- // component" warning was triggered.
+ // I.e., `mapSelectChild` was called again, and state update was scheduled, we cannot
+ // avoid that, but the state update is never executed and doesn't do a rerender.
  expect( screen.getByText( 'none' ) ).toBeInTheDocument();
  expect( mapSelectParent ).toHaveBeenCalledTimes( 4 );
- expect( mapSelectChild ).toHaveBeenCalledTimes( 2 );
+ expect( mapSelectChild ).toHaveBeenCalledTimes( 3 );
+ expect( Parent ).toHaveBeenCalledTimes( 3 );
+ expect( Child ).toHaveBeenCalledTimes( 1 );
  } );
 
  describe( 'rerenders as expected with various mapSelect return types', () => {