TypeError: Cannot read property 'subscriptions' of undefined

Am receiving this error in my test of a component that uses RTKQ to fetch data and I cannot figure out where it’s coming from and how to get around/fix it.

My API looks like so:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

interface PanelContentInterface { 
  header?: any;
  body?: any;
}

interface PanelRequestPayload {
  endpoint: string;
  caseID: string;
}

export const panelApi = createApi({
  reducerPath: 'panel',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://jsonplaceholder.typicode.com/'),
  }),
  endpoints: builder => ({
    panelData: builder.query<PanelContentInterface, PanelRequestPayload>({
      query: ({ endpoint, id }) => `${endpoint}/${id}`,
      transformResponse: (response: any) => response.data,
    }),
  }),
});

export const { usePanelDataQuery } = panelApi;

The test for the panel component is rather straight forward (redundant) but still fails.

test('should render correctly', () => {
    render(<Panel endpoint="test-enpoint" testID="test-panel" />);
    expect(screen.getByTestId('test-panel')).toBeInTheDocument();
});

I receive both Error: No data found at 'state.panel'. Did you forget to add the reducer to the store? and Error: Uncaught [TypeError: Cannot read property 'subscriptions' of undefined]

Can anyone help?

I’m using this very same method in multiple other places in the same project and they all seem to work fine.

Additional Context:

const { data, isSuccess, isLoading } = usePanelDataQuery(payload);

This line pops up in the console too, but the issue I’m having is that this error only appears in the test and not in the component. The component receives the data and will render properly.

[phryneas]

Please send your lead our way. They are crippling your app going forward, for no good reason.

[phryneas]

For separate files you don’t need multiple apis. That is documented in the chapter Code Splitting.

If you ever want to have something like automatic refetching of endpoints with invalidatesTags/providesTags, those have to be in the same api.

Multiple apis make sense if you talk to completely independent data sources that will never have an overlap - say an api for cookie recipes and an api about dog breeds. If they ever interact or reference each other (say, a comment on a post with an author), those are the same api.