代码之家  ›  专栏  ›  技术社区  ›  Albert Olivé Corbella

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

  •  2
  • Albert Olivé Corbella  · 技术社区  · 6 年前

    我有一个使用 render props :

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

    我想用 jest.mock 因为如果 Box 我不希望快照失败。

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

    然而,由于这一点,保险范围正在缩小:

    enter image description here

    我怎样才能解决这个问题?

    1 回复  |  直到 6 年前
        1
  •  3
  •   Andreas Köberle    6 年前

    你必须这样嘲笑它

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

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