13. How do you test thunks and async actions?

Question

Accepted Answer

Testing thunks and async actions in Redux Toolkit focuses on verifying that they dispatch the correct actions and handle asynchronous logic properly. You can test them in isolation without rendering components by mocking API calls and the Redux store. **1. Mock API Calls:** Use libraries like `jest.fn()` or `msw` to mock fetch or axios responses. **2. Assert Dispatch Calls:** Verify that your thunk dispatches the expected pending, fulfilled, or rejected actions. **3. Use Mock Store:** Create a fake Redux store using `@reduxjs/toolkit`’s `configureStore` or libraries like `redux-mock-store` for isolated testing. **4. Test Logic in Isolation:** Call the thunk’s payload creator directly with mocked `dispatch` and `getState` to test business logic independently. import { fetchUser } from './userSlice';
import { configureStore } from '@reduxjs/toolkit';
import fetchMock from 'jest-fetch-mock';
import userReducer from './userSlice';

fetchMock.enableMocks();

describe('fetchUser thunk', () => {
  beforeEach(() => {
    fetch.resetMocks();
  });

it('dispatches fulfilled when API succeeds', async () => {
    fetch.mockResponseOnce(JSON.stringify({ id: 1, name: 'John' }));

const store = configureStore({ reducer: { user: userReducer } });

await store.dispatch(fetchUser(1));

const actions = store.getState().user;
    expect(actions.status).toBe('succeeded');
    expect(actions.data.name).toBe('John');
  });
}); By mocking network requests and asserting dispatched actions, you can ensure that your thunks handle asynchronous behavior and side effects correctly without needing a real API or browser environment.

13. How do you test thunks and async actions?

Testing Thunks and Async Actions in Redux Toolkit

13. How do you test thunks and async actions?

Testing Thunks and Async Actions in Redux Toolkit

Scenario Questions

Follow-up Questions