React Testing Library中如何mock自定义Hook验证删除按钮是否渲染

核心问题说明 #

1. 你之前的mock没有对齐b函数的返回结构，b是普通同步自定义hook，无需使用mockResolvedValue，直接用mockReturnValue设置返回值即可
2. 原组件渲染的删除按钮文本是Remove，测试用例中用name: 'Delete'查询会匹配失败

完整可运行测试代码 #

import xyz from './a';
import { render } from '@testing-library/react';

// 第一步：mock整个b模块，默认导出替换为jest模拟函数
jest.mock('./b', () => jest.fn());
const mockB = require('./b').default;

const mockVar2Data = [
  {
    userId: 1,
    id: 1,
    title: 'My First Album'
  }
];
const mockSk = {
  app: {
    onConfigure: jest.fn(),
    getParameters: jest.fn().mockReturnValueOnce({}),
    setReady: jest.fn(),
    getCurrentState: jest.fn()
  }
};

it('should display Remove button', () => {
  // 第二步：给mock的b函数设置返回值，完全匹配原hook的返回结构
  mockB.mockReturnValue({
    var1: {}, // 未用到的字段随便给默认值即可
    var2: mockVar2Data, // 给非空数组满足渲染条件
    func1: jest.fn(),
    func2: jest.fn()
  });

  const { getByRole } = render(<xyz sdk={mockSk.app}/>);
  // 第三步：查询名称和实际渲染的按钮文本一致
  expect(getByRole('button', { name: 'Remove' })).toBeInTheDocument();
});

实现逻辑 #

• jest.mock('./b', () => jest.fn())会把整个b模块替换为jest模拟函数，因为原模块是默认导出b函数，所以导入的default属性就是这个模拟函数
• 调用mockB.mockReturnValue时返回的结构和原b函数完全对齐，a组件解构拿到的var2就是我们设置的非空数组，满足var2.length > 0的渲染条件，删除按钮就会正常渲染

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