如何使用渲染道具正确模拟 Jest 一个 React 组件

Question

我有这个使用render props的组件：

  <Box
    renderBody={() => {
      return (
        <BoxContent>
          <IconContent>
            <CheckIcon fill="#FF3F55" />
          </IconContent>Payment processed successfully
        </BoxContent>
      );
    }}
  />

我想使用jest.mock 进行模拟，因为如果Box 发生任何变化，我不希望快照失败。

jest.mock('components/Common/Box', () => 'Box');

但是，覆盖失败：

我该如何解决这个问题？

Answer 1

你必须像这样模拟它

jest.mock('components/Common/Box', () => ({renderBody}) => renderBody());

这将返回一个函数，该函数将获取渲染道具并返回渲染组件。