How to test a Redux store using Jest
In this video, I'll show you how to test a Redux store using the Redux Toolkit. I'm using the Redux Toolkit's createAsyncThunk utility, which integrates seamlessly with Redux slices using the extraReducers field. This utility automatically dispatches pending, completed, and rejected actions based on the state of the async operation. Next, I'm using the received state in the extraReducers field to update the state of the store. Finally, I'm reading the state to make sure it's working correctly.
Category
🦄
CreativityTranscript
00:00In this video, I will show how I'm testing this login feature using Jest.
00:16The login feature operates as follows.
00:21I utilize the form from this component.
00:28To render the login form, upon user submission, the form data is extracted and passed as parameter to the login function.
00:51Next, the login function utilizes the Redux toolkit readAsyncFunc utility to execute an asynchronous HTTP request to the server with user data as fields.
01:21I'm using readAsyncFunc utility because it automatically dispatches pending, fulfilled, and rejected actions based on the async operation state.
01:46Finally, I'm using the received data to update the store state.
02:04Success message, error message, and for animation.
02:16To test the login function, I'm substituting the HTTP request with a mock.
02:35And I will provide a predefined response for my HTTP request during the test.
03:01To create the mock, I'm using this library AxiosMockAdapter.
03:15And here I'm calling the login function with the created mock and the predefined response.
03:30Next, I'm using this method getState() to get the store state and verify if the data is valid.
03:53Let's run a test.
04:00The test is passed as expected.
04:16This is for success login.
04:20For fail login, I just need to modify the mock response with false.
04:31For success, and change the message to the error message.
04:45Let's run the test.
04:59And even this is for success login.