如何使用React Testing Library为React map渲染动态子组件编写单元测试

核心测试原则 #

完全站在组件使用者的视角验证渲染结果，不要去测内部实现细节——比如不要断言内部map方法的调用次数、条件判断走了哪个分支，只要最终页面上渲染的内容符合预期即可，后续哪怕你把遍历逻辑从map改成for循环、把if/else判断改成配置字典映射，测试用例都不需要调整，稳定性更高。

具体测试步骤 #

1. 提前mock依赖的子题型组件 #

避免子组件自身的逻辑干扰父组件的测试结果，mock的组件直接透出接收的props，方便后续断言传参是否正确：

// 单选组件mock
jest.mock('./Radiotypecomponent', () => (props) => (
  <div data-testid={`radio-question-${props.id}`}>
    单选题型：{props.questions}
    <span className="mock-options">{JSON.stringify(props.options)}</span>
  </div>
))
// 文本题组件mock
jest.mock('./Texttypecomponent', () => (props) => (
  <div data-testid={`text-question-${props.id}`}>
    文本题型：{props.questions}
  </div>
))
// 其余题型组件按照相同规则mock即可

2. 构造覆盖全场景的测试数据 #

测试数据要覆盖所有已支持的题型、边界case：

const testQuestionList = [
  {
    id: 101,
    type: 'Radio',
    questions: '你日常使用最多的开发工具是？',
    options: ['VS Code', 'WebStorm', 'Vim']
  },
  {
    id: 102,
    type: 'text',
    questions: '请简单描述你最近做的一个项目',
    options: []
  },
  {
    id: 103,
    type: 'unknownType',
    questions: '未知测试题型',
    options: []
  }
]

3. 编写对应测试用例 #

• 空列表场景验证

test('传入空问题数组时，不渲染任何题型组件', () => {
  render(<QuestionListParent questionList={[]} />)
  expect(screen.queryByTestId(/-question-/)).not.toBeInTheDocument()
})

• 题型匹配与props传递验证

test('遍历问题列表时，根据type值渲染对应题型组件，且props传递正确', () => {
  render(<QuestionListParent questionList={testQuestionList} />)

  // 验证Radio类型组件渲染正确、传参正确
  const radioItem = screen.getByTestId('radio-question-101')
  expect(radioItem).toBeInTheDocument()
  expect(radioItem).toHaveTextContent('你日常使用最多的开发工具是？')
  expect(radioItem.querySelector('.mock-options')).toHaveTextContent(
    JSON.stringify(['VS Code', 'WebStorm', 'Vim'])
  )

  // 验证text类型组件渲染正确、传参正确
  const textItem = screen.getByTestId('text-question-102')
  expect(textItem).toBeInTheDocument()
  expect(textItem).toHaveTextContent('请简单描述你最近做的一个项目')
})

• 未知题型兜底逻辑验证

test('遇到未配置映射规则的type值时，按预期渲染兜底内容', () => {
  render(<QuestionListParent questionList={testQuestionList} />)
  // 按照你实际写的兜底逻辑断言即可，比如渲染"暂不支持该题型"提示，或者不渲染任何内容
  expect(screen.getByText('暂不支持该题型')).toBeInTheDocument()
})

注意：如果你的组件是动态按需加载题型组件，记得在测试里用waitFor等待异步组件渲染完成后再做断言，避免出现测试时序问题。

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