Jest测试React组件点击交互时是否需要进行mock的相关问题

什么时候需要做Mock操作？ #

• 测试逻辑依赖外部服务/接口返回：比如组件需要请求后端接口拿数据，不需要真实发送网络请求，Mock接口返回值即可
• 依赖第三方模块/组件的复杂行为，且该行为不是当前测试的目标：比如测试当前组件时，内部引入的封装组件的功能不需要同步测试，直接Mock该组件即可
• 依赖浏览器原生API/全局对象：比如用到了window.location、localStorage、定时器、Canvas这类不容易直接在测试环境操作的API，需要Mock对应能力
• 测试回调函数是否被正确触发：比如父组件传给子组件的onClick回调，要验证子组件点击后是否正确调用该回调，就可以传入Mock函数验证调用情况
• 组件依赖全局状态/上下文，但不需要测试整个状态流的联动，只关心当前组件的行为：比如组件通过Redux拿数据，但是当前只测交互逻辑，不需要走完整的Redux流程，可以Mock状态钩子的返回值

你当前场景的处理方案 #

你要验证的「点击触发区域后下拉展开、下拉内容符合预期」场景，不需要Mock核心交互逻辑，只需要处理几个依赖项的Mock/传值即可：

1. 先补全缺失的依赖项Mock #

你的组件代码中用到了data、isElementSelected、selectElement、keyFromEl、handleDetailsClick这几个未显式定义的变量/方法，以及Redux的store，处理方式如下：

• 如果data是通过useSelector从Redux中获取的，直接Mock useSelector返回你构造的测试数据即可，示例：

jest.mock('react-redux', () => ({
  ...jest.requireActual('react-redux'),
  useSelector: jest.fn(() => [
    {id: 1, name: '摄像头A'},
    {id: 2, name: '摄像头B'}
  ]),
  useDispatch: jest.fn(() => jest.fn())
}))

• 其他未定义的工具方法如果和当前测试的展开逻辑无关，直接Mock返回固定值即可，比如isElementSelected可以Mock返回false，keyFromElMock返回el.id即可
• 你当前传入的三个回调已经是空函数，不需要额外修改，只有当你要验证回调的触发参数、次数时才需要换成Mock函数

2. 补充交互测试逻辑 #

在原有渲染测试的基础上增加点击、校验逻辑即可，示例：

import { fireEvent } from '@testing-library/react';

test('点击click me后正确展开cameras下拉列表，内容符合预期', () => {
  render(
    <Provider store={store}>
      <SelectionList
        classes={{ button_basic: "", formControl: "", selectionCard: "" }}
        action={"cameras"}
        actionArgs={""}
        onUpdateClick={handleUpdateClick}
        onDeleteClick={handleUpdateClick}
        onDetailsClick={handleUpdateClick}
      />
    </Provider>
  );
  // 校验初始状态下拉未渲染
  expect(screen.queryByText('摄像头A')).not.toBeInTheDocument();
  // 触发点击操作
  fireEvent.click(screen.getByText('click me'));
  // 校验下拉正确展开，内容符合预期
  expect(screen.getByText('摄像头A')).toBeInTheDocument();
  expect(screen.getByText('摄像头B')).toBeInTheDocument();
});

3. 该场景需要额外Mock的特殊情况 #

如果你不需要测试下拉里的具体内容，只需要验证点击后折叠组件的状态是否正确切换，可以Mock Material UI的Collapse组件，验证传入的in属性是否变为true即可。不过这种属于实现细节测试，更推荐上面的行为测试方案，直接验证用户可见的内容更符合测试最佳实践。

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