RTK Query: Unit testing shared features

[mattduggan]

Hey 👋 ,

First, thank you for RTK + RTK Query! I love working with it!

Question:
Are there any patterns for unit testing shared components that use RTK Query hooks where it's enforced that the data has already been fetched by a container using the same hook with args?

Example:
I have a Page component that composes a number of Feature components. I want to avoid redundantly handling loading and error states in all of the Feature components by enforcing that any Page component use the RTK Query hooks needed by the Features and then the Features may assume that if they are rendered, the data exists in the cache.

const Page = () => {
  const {error, isLoading} = useDataQuery();
  if (isLoading) { return <Loading/> }
  if (error) { return <Alert>{error.message}</Alert>}
  return <DataTable/>
}

const DataTable = () => {
  const {data} = useDataQuery();
  return /* Table with data */
}

Problem:
Under test, the Feature component hasn't had its data loaded. The simplest thing I could think of to work around this is to check the data for null and return early in the component, then await findBy* in the test:

const DataTable = () => {
  const {data} = useDataQuery();
  if (data == null) return null;
  return /* Table with data */
}

describe('Feature: DataTable', () => {
  it('handles displaying data in a table', async () => {
    render(<DataTable/>);
    await screen.findByText('something in data table');
    expect(screen.getByText('something else in data table')).toBeInTheDocument();  
  })
})

However, I dislike this boilerplate almost as much as handling loading/error states.

I'd love to hear your thoughts on the matter and if I could be thinking about or organizing this differently.

FWIW I'm using MSW and React Testing Library.

[phryneas]

You can snapshot a store that has all the data you want using the Redux devtools and then use a hydration action together with extractRehydrationInfo to get that data into the store in your test.

[mattduggan]

Thanks! Is it also possible to use preloaded state? I already have a custom render method that wraps components in the store Provider and accepts store options.

[phryneas]

Yes and no. The hook will likely return the right value, but it will probably not behave like in reality, as that would essentially break the middleware.