React Redux应用集成测试最佳实践：如何测试跨组件Redux状态更新

核心思路非常简单：不需要渲染整个应用，只需要组装测试场景涉及的最小关联组件集合，搭配真实的Redux store实例即可，全程不需要感知Redux的存在，完全从用户可见的交互结果出发做断言。

具体实现步骤 #

• 首先封装一个公共的测试渲染工具，内置和生产环境逻辑完全一致的Redux Provider，支持传入自定义初始状态：

// 测试工具文件里的公共render方法
import { render } from '@testing-library/react'
import { Provider } from 'react-redux'
import { configureStore } from '@reduxjs/toolkit'
// 导入你项目里的所有reducer
import rootReducer from '/path/to/your/rootReducer'

export const renderWithRedux = (ui, { initialState } = {}) => {
  const store = configureStore({
    reducer: rootReducer,
    preloadedState: initialState
  })
  const Wrapper = ({ children }) => <Provider store={store}>{children}</Provider>
  return render(ui, { wrapper: Wrapper })
}

• 写测试用例的时候，只渲染测试场景里涉及的两个关联组件，不需要渲染外层无关的App、Search等容器组件：

import { screen, fireEvent } from '@testing-library/react'
import { renderWithRedux } from '/path/to/your/testUtils'
import Element1 from '/path/to/Element1'
import List from '/path/to/List'

test('点击添加按钮后，对应元素会出现在列表中', () => {
  // 初始化状态：搜索结果里有Element1，列表为空
  const initialState = {
    // 按你项目的state结构填对应初始值即可
    search: { results: [{ id: 1, name: 'Element1' }] },
    list: { items: [] }
  }
  // 直接渲染需要联动的两个组件，共享同一个store
  renderWithRedux(
    <>
      <Element1 />
      <List />
    </>,
    { initialState }
  )

  // 模拟用户点击添加按钮
  fireEvent.click(screen.getByRole('button', { name: /添加到列表/i }))

  // 断言用户可见的结果：列表里已经出现了Element1
  expect(screen.getByText('Element1')).toBeInTheDocument()
  expect(screen.getByRole('list')).toContainElement(screen.getByText('Element1'))
})

理念匹配说明 #

这个方案完全符合「Redux作为实现细节」的测试原则：全程没有断言dispatch是否被调用、没有读取store内部的state值、没有mock任何Redux相关的API，所有测试逻辑都是模拟用户实际操作、验证用户能看到的界面变化，Redux在整个测试里完全是黑盒的实现细节，就算之后你把Redux换成其他状态管理库，只要交互逻辑不变，这个测试用例完全不需要修改。
同时你也不需要渲染整个应用，只引入了关联的两个业务组件，测试运行速度和普通组件单元测试差不多，不会有性能问题。

内容的提问来源于stack exchange，提问作者doggie