Async Selector in Test Does not Advance Past Suspsense Fallback when using Polly.js (????)

[btnwtn]

Hello,

I'm trying to use Recoil exactly how the docs show it's use case and I can't get my tests to pass. Everything works on the actual dev server and production and what not but the tests are just completely stuck for whatever reason.

I have a selectorFamily:

export const campaignTracksQuery = selectorFamily({
  key: 'CampaignTracks',
  get:
    (params: { campaignId: string; upliftQuery: StreamUpliftQuery }) =>
    async ({ get }) => {
      const blah = get(SomeStuff);

      const tracks = await Api.of(blah).getTracks({
        campaignId: params.campaignId,
        upliftQuery: params.upliftQuery,
      });

      // I have console logged here and confirmed polly is supplying the correct data

      return tracks; // <-- this never seems to make it to the component in the test
    },
});

a react component using it like so:

export function Parent() {
  return (
      <ErrorBoundary fallback={null}>
        <React.Suspense fallback={"loading..."}>
          <TrackCountSubtitle campaignId={123} />
        </React.Suspense>
      </ErrorBoundary>
  )
}

function TrackCountSubtitle(props: { campaignId: string }) {
  const tracks = useRecoilValue(
    campaignTracksInfoQuery({ campaignId: props.campaignId, upliftQuery: 'POSITIVE' }),
  );

  return (
    <h1>{tracks.length} tracks!</h1>
  );
}

and my test setup like:

async function renderPage() {
  render(
    <MemoryRouter
      initialEntries={[
        `/url`,
      ]}
    >
      <RecoilRoot>
        <Parent />
      </RecoilRoot>
    </MemoryRouter>,
  );
}

beforeEach(() => {
  jest.useFakeTimers();

  polly.server
    .get('my_api/tracks?uplift=POSITIVE')
    .intercept((_, res) => {
      res.json({
        data: [{…}],
      });
    });
});

test('blah', async () => {
  await renderPage();
  await flushPromisesAndTimers(); // <-- taken from Recoil docs

  await screen.findByText('Blah'); // <-- this passess in the actual test

  await screen.findByText('loading...'); // <-- this works, I can find the component in it's suspended state
  await flushPromisesAndTimers(); 

  await screen.findByText(/2 tracks!/);  // <-- this never triggers
});

I'm kind of at my wits ends here, is there something obvious that I'm missing?

[btnwtn]

Ok maybe I found an issue here. My selectorFamily was calling another selectorFamily… is that frowned upon?

[vitorrd]

Ok maybe I found an issue here. My selectorFamily was calling another selectorFamily… is that frowned upon?

It appears the example you posted is incomplete as per this last answer. Would you be able to create a minimum reproduction of your issue?