reactjs - Enhets testa Redux Toolkit med React Testing Library riktlinje

Kan någon snälla lära mig hur man enhetstestar redux toolkit med hjälp av React Testing Library? Jag försökte göra som i dokumentationen för redux toolkit, men inget resultat. Jag har också försökt alla lösningar jag hittade, men kanske gör jag något fel.

min.service.ts

export const allHeadcountApiPaths = {
  fetchAllHeadcount: (params: IQueryParams) =>
    `${ApiUrlService.getTDS()}/rpc/v1/version/${params.versionId}/planned-headcount/view/with-relations${buildQuery(params)}`,
};

export const fetchBeginningHeadcount = createAsyncThunk('allHeadcount/fetchBeginningHeadcount', async (params: IQueryParams) => {
  const response = await api('GET', allHeadcountApiPaths.fetchAllHeadcount(params), {});
  return response.data;
});

my.slice.ts

export const initialState = new AllHeadcountState()

const allHeadcountSlice = createSlice({
  name: 'allHeadcount',
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder
      .addCase(fetchBeginningHeadcount.pending, state => {
        return requestListData<IAllHeadcountState, IHeadcount[]>({ ...state }, ['beginningHeadcount'])
      })
      .addCase(fetchBeginningHeadcount.fulfilled, (state, action) => {
        const { content, totalElements, totalPages } = action.payload
        return receiveListData<IAllHeadcountState, IHeadcount[]>({ ...state }, ['beginningHeadcount'], content, totalElements, totalPages)
      })
      .addCase(fetchBeginningHeadcount.rejected, (state, action) => {
        return errorListData<IAllHeadcountState, IHeadcount[]>({ ...state }, ['beginningHeadcount'], String(action.error.message))
      })
   },
})

export default allHeadcountSlice.reducer

min.leverantör.ts

   const render = (ui: ReactElement, { initialState = {}, initializedStore = store, ...renderOptions } = {}): RenderResult => {
  const Wrapper = ({ children }: PropsWithChildren): JSX.Element => {
    return <Provider store={initializedStore}>{children}</Provider>
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
}

export * from '@testing-library/react'
export { render }

Jag förstår inte heller, ska skriftliga tester skrivas separat för service och slice, eller täcker ett test båda?! Snälla hjälp mig att förstå hur dessa tester ska fungera! Tack på förhand!

Svar #1

Enligt det rådet bör du bara testa dina komponenter som använder Redux internt - inte din Redux-slice eller din tjänst isolerat.

Rendera egentligen bara din komponent i testet, simulera användarinteraktion och se hur den beter sig. För testet spelar det inte någon roll om du använder Redux i slutändan eller något annat - det ska bara fungera.