如何对react-pdf renderer的PDFDownloadLink组件的加载/错误状态进行单元测试？

嘿，我之前也碰到过一模一样的问题！原来的mock只直接返回children，但现在children是个接收状态的函数，所以得调整mock的写法，让它主动调用这个函数并传入我们想要测试的状态值。下面是具体的解决方法：

1. 修改基础Mock，让它调用children函数 #

原来的mock只是把children直接渲染出来，现在我们需要让PDFDownloadLink的mock组件执行这个children函数，传入指定的loading和error状态。比如：

jest.mock('@react-pdf/renderer', () => ({
  PDFDownloadLink: jest.fn(({ children }) => {
    // 这里先默认传一个基础状态，你可以在单个测试用例里覆盖它
    return children({ loading: false, error: null });
  }),
  // 别忘了mock你用到的其他react-pdf组件，比如Document、Page
  Document: ({ children }) => <div>{children}</div>,
  Page: ({ children }) => <div>{children}</div>,
  // 其他需要的组件也同理添加
}));

2. 针对不同状态写测试用例 #

在每个测试用例里，我们可以重新指定PDFDownloadLink的mock实现，传入对应要测试的状态，这样就能验证不同状态下的UI表现了：

测试加载状态

test('当处于加载状态时显示加载提示', () => {
  // 覆盖mock，传入loading为true的状态
  require('@react-pdf/renderer').PDFDownloadLink.mockImplementation(({ children }) => {
    return children({ loading: true, error: null });
  });

  const { getByText } = render(<YourParentComponent />);
  // 替换成你实际的加载提示文本
  expect(getByText('正在生成PDF，请稍候...')).toBeInTheDocument();
});

测试错误状态

test('当发生错误时显示错误提示', () => {
  require('@react-pdf/renderer').PDFDownloadLink.mockImplementation(({ children }) => {
    // 传入错误对象，这里可以自定义错误信息
    return children({ loading: false, error: new Error('PDF生成失败') });
  });

  const { getByText } = render(<YourParentComponent />);
  // 替换成你实际的错误提示文本
  expect(getByText('抱歉，PDF下载失败，请重试')).toBeInTheDocument();
});

测试正常状态（可下载）

test('当无加载无错误时显示下载按钮/链接', () => {
  require('@react-pdf/renderer').PDFDownloadLink.mockImplementation(({ children }) => {
    return children({ loading: false, error: null });
  });

  const { getByText } = render(<YourParentComponent />);
  // 替换成你实际的下载按钮文本
  expect(getByText('下载我的PDF')).toBeInTheDocument();
});

小提醒 #

如果你的<MyPdf />组件里用到了react-pdf的其他核心组件（比如Document、Page、Text之类的），一定要在mock里把它们都加上，不然测试时会因为找不到这些组件而报错。

备注：内容来源于stack exchange，提问作者physicsboy