如何使用渲染道具使用Jest a 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());

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