reactjs - Yksikkötestaa Redux Toolkitia käyttäen React Testing Library -ohjetta

Voiko joku opettaa minulle, miten tehdään yksikkötestejä redux toolkitilla käyttämällä react testing librarya? Yritin tehdä kuten redux toolkitin dokumentaatiossa, mutta tulosta ei tullut. Olen myös kokeillut kaikkia löytämiani ratkaisuja, mutta ehkä teen jotain väärin.

minun.palvelu.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;
});

minun.viipale.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

minun.tarjoajani.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 }

Myös, en ymmärrä, pitäisikö kirjoittaa testit erikseen palvelulle ja viipaleelle, vai kattaako yksi testi ne molemmat?! Ole hyvä ja auta minua ymmärtämään, miten näiden testien pitäisi toimia! Kiitos etukäteen!

Vastaus #1

Sen neuvon mukaan sinun pitäisi testata vain komponenttejasi, jotka käyttävät Reduxia sisäisesti - ei Redux-sliceasi tai palveluasi erillään.

Todellisuudessa vain renderöi komponenttisi testissä, simuloit käyttäjän vuorovaikutusta ja katso, miten se käyttäytyy. Testille ei ole väliä, käytätkö lopulta Reduxia tai mitään muuta - sen pitäisi vain toimia.