How do you test Redux-connected components?

A connected component is an integration point between UI, selectors and reducers. If you mock useSelector, you prove almost nothing about that integration. A real store with real reducers and a mocked network boundary tests the wiring that actually breaks in production.

function renderWithStore(ui: React.ReactElement, preloaded?: Partial<State>) {
  const store = configureStore({
    reducer: rootReducer,
    preloadedState: preloaded,
  });

  return {
    store,
    ...render(<Provider store={store}>{ui}</Provider>),
  };
}

test("shows items loaded from the API", async () => {
  renderWithStore(<ItemList />);

  expect(await screen.findByText("Keyboard")).toBeInTheDocument();
});

What to test where

• Reducers and selectors as pure functions, with table-driven cases
• Connected components through a real store and mocked API
• Thunks and listeners with a mocked store or a test server
• Avoid mocking selectors, because that bypasses the state mapping

Create a new store per test so actions from one case cannot leak into another. If the store is expensive, a factory that reuses the reducer map is still cheap. Use preloadedState to put the component in a specific scenario without dispatching a long setup sequence.