React Unit testing using RTL : Redux state is not getting updated even mock response has been received in reducer

[nandkishorhub]

Writing unit tests for my React (Typescript) application where I am using MSW service for Mocking response
For state management using Redux toolkit .
The issue is I am able to get mocked Response in my reducer case inside slice but it is not further updated state and hence I am not able to test component further .

Below is the Redux code , if you check any of the below async method eg: fetchMoviesAsync so I am able to get mock data inside it's case where I am able to console it .

import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import movieApi from "../../common/apis/movieApi";
import { APIKey } from "../../common/apis/MovieApiKey";
import { InitialState, MovieOrShowDetails } from "../../interfaces/interfaces";
import { RootState } from "../store";
import { nestedMovieObj } from "../../interfaces/interfaces";

const initialState: InitialState = {
  movies: {},
  shows: {},
  movieOrShowDetail: {},
  movieStatus: "pending",
  showStatus: "pending",
};

export const fetchMoviesAsync = createAsyncThunk<nestedMovieObj, any>(
  "movies/fetchMoviesAsync",
  async (term: string, thunkAPI) => {
    const response = await movieApi.get(
      `?apiKey=${APIKey}&s=${term}&type=movie`
    );
    console.log("term movies", term);
    return response.data;
  }
);

export const fetchShowsAsync = createAsyncThunk<nestedMovieObj, any>(
  "movies/fetchShowsAsync",
  async (term: string, thunkAPI) => {
    const response = await movieApi.get(
      `?apiKey=${APIKey}&s=${term}&type=series`
    );
    console.log("Data res...");
    return response.data;
  }
);

export const fetchMovieOrShowDetailAsync = createAsyncThunk<
  nestedMovieObj,
  any
>("movies/fetchMovieOrShowDetailAsync", async (id, thunkAPI) => {
  const response = await movieApi.get(`?apiKey=${APIKey}&i=${id}&Plot=full`);
  return response.data;
});

const movieSlice = createSlice({
  name: "filmData",
  initialState,
  reducers: {
    // here we have used normal reducer to reset/cleanup purpose
    // hence you can see below in all actions we have reset respctive data
    removeMovieOrShowDetail: (state) => {
      state.movieOrShowDetail = { Response: "", totalResults: "", Search: [] };
    },
    movieDetail: (state) => {
      state.movies = { Response: "", totalResults: "", Search: [] };
    },
    ShowDetail: (state) => {
      state.shows = { Response: "", totalResults: "", Search: [] };
    },
  },

  extraReducers: (builder) => {
    builder.addCase(fetchMoviesAsync.pending, (state) => {
      state.movieStatus = "pending";
      return state;
    });
    builder.addCase(
      fetchMoviesAsync.fulfilled,
      (state, action: PayloadAction<nestedMovieObj>) => {
        state.movies = action.payload;
        state.movieStatus = "resolved";
        console.log("State data ", state);
        return state;
      }
    );
    builder.addCase(fetchMoviesAsync.rejected, (state) => {
      console.log("Rejected ", state.movies);
    });

    builder.addCase(fetchShowsAsync.pending, (state) => {
      state.showStatus = "pending";
      return state;
    });

    builder.addCase(
      fetchShowsAsync.fulfilled,
      (state, action: PayloadAction<nestedMovieObj>) => {
        state.showStatus = "resolved";
        state.shows = action.payload;
        return state;
      }
    );

    builder.addCase(
      fetchMovieOrShowDetailAsync.fulfilled,
      (state, action: PayloadAction<nestedMovieObj>) => {
        state.movieOrShowDetail = action.payload;
        return state;
      }
    );
  },
});

export const getAllMovies = (state: RootState) => {
  console.log("Movies state", state);
  return state.filmData.movies;
};
export const getAllShows = (state: RootState): nestedMovieObj | {} =>
  state.filmData.shows;
export const getMovieStatus = (state: RootState): string =>
  state.filmData.movieStatus;
export const getShowsStatus = (state: RootState): string =>
  state.filmData.showStatus;
export const getMovieOrShowDetails = (
  state: RootState
): MovieOrShowDetails | {} => state.filmData.movieOrShowDetail;

export const { removeMovieOrShowDetail, movieDetail, ShowDetail } =
  movieSlice.actions;

export default movieSlice.reducer;

Below is the my test file :

 import { getByAltText, render, screen, waitFor } from "@testing-library/react";
import Home from "./Home";
import { renderWithProviders } from "../../utils/testUtils";

import { http, HttpResponse, delay } from "msw";
import { setupServer } from "msw/node";
import App from "../../App";
import { PreloadedState } from "@reduxjs/toolkit";
import { InitialState, MovieOrShowDetails } from "../../interfaces/interfaces";

// This configures a request mocking server with the given request handlers.
 
 

test("Rendering default movie/shows", async () => {
  renderWithProviders(<Home />);
  
});

Here I am rendering component with customized render function as per official document .

But I am not able to get updated state data inside respective component .

Code for customized render function

import React, { PropsWithChildren } from "react";
import { render } from "@testing-library/react";
import { Provider } from "react-redux";
import type { RenderOptions } from "@testing-library/react";
import type { PreloadedState } from "@reduxjs/toolkit";

import { setupStore } from "../features/store";
import type { AppStore, RootState } from "../features/store";

interface ExtendedRenderOptions extends Omit<RenderOptions, "queries"> {
  preloadedState?: PreloadedState<RootState>;
  store?: AppStore;
}

export function renderWithProviders(
  ui: React.ReactElement,
  {
    preloadedState = {},
    // Automatically create a store instance if no store was passed in
    store = setupStore(preloadedState),
    ...renderOptions
  }: ExtendedRenderOptions = {}
) {
  function Wrapper({ children }: PropsWithChildren<{}>): JSX.Element {
    console.log("STORE...", store.getState());
    return <Provider store={store}>{children}</Provider>;
  }
  // Return an object with the store and all of RTL's query functions
  return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
}

Below is the code for my store.ts

import {
  configureStore,
  PreloadedState,
  combineReducers,
} from "@reduxjs/toolkit";
import movieReducer from "./movies/movieSlice";

const rootReducer = combineReducers({
  filmData: movieReducer,
});

export function setupStore(preloadedState?: PreloadedState<RootState>) {
  return configureStore({
    reducer: rootReducer,
    preloadedState,
  });
}
export type RootState = ReturnType<typeof rootReducer>;
export type AppStore = ReturnType<typeof setupStore>;
export type AppDispatch = AppStore["dispatch"];

It seems there is some issue regarding store settings for testing .

[nandkishorhub]

Hi , Thank you so much for such detailed clarification 🙂 really appreciate it . I was able to resolved issue , I had to use waitFor as I wasn't waiting for state to update so now it is working. Thanks again for your help

…

On Fri, May 3, 2024, 9:57 PM Sean Dinwiddie ***@***.***> wrote: I see you're using MSW for mocking API responses and RTL for testing your React application. You're also using Redux Toolkit for state management. The issue you're facing is that the state is not being updated in your component even though you're receiving the mocked response in your reducer. Here are a few things to check: 1. *Make sure you're using the correct store instance*: In your renderWithProviders function, you're creating a new store instance using setupStore. Ensure that you're using the same store instance throughout your test. 2. *Verify that the reducer is being called*: Put a console log or a debugger in your reducer to verify that it's being called with the correct action and payload. 3. *Check the action payload*: Make sure that the payload of the action is correct and matches the expected shape of your state. 4. *Use waitFor from RTL*: Instead of using render directly, try using waitFor from RTL to wait for the state to be updated. For example: test("Rendering default movie/shows", async () => { const { store } = renderWithProviders(<Home />); await waitFor(() => expect(store.getState().filmData.movies).toEqual(expectedMovies)); // Assert that the component has rendered correctly}); 5. *Check the component's props*: Verify that the component is receiving the correct props from the store. You can do this by using the debug function from RTL or by adding a console log in your component. If none of these suggestions help, please provide more code or details about your test setup, and I'll do my best to assist you. — Reply to this email directly, view it on GitHub <#4622 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZ5X4PNX7BWZAX4GEBY5CJLZAO3FHAVCNFSM6AAAAAA7WETIUKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TGMBXGY2DA> . You are receiving this because you authored the thread.Message ID: ***@***.***>