javascript - 如何使用渲染 Prop 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());

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