如何使用 React 测试库测试记忆化组件的回调？

Question

我正在使用带有 Jest 的 React 测试库来测试我的组件。其中一个组件使用数据呈现 table，因此我决定按照 table 库作者的建议使用 React.memo。我是这样使用它的：

import React, { memo } from 'react'

const MemoizedComponent = memo(({ data }) => {
  // Component logic

  return (
    <>
      // Component UI
    </>
  )
}, (prevProps, nextProps) => {
  if (JSON.stringify(prevProps) !== JSON.stringify(nextProps)) {
    return false
  }

  return true
})

export default MemoizedComponent

但是当我看到测试覆盖率时，memo() 回调未被我的测试覆盖：

(prevProps, nextProps) => {
  if (JSON.stringify(prevProps) !== JSON.stringify(nextProps)) {
    return false
  }

  return true
}

有没有办法在渲染后更改道具，以便我可以完成对这个记忆组件的测试？谢谢！

Answer 1

来自 React 测试库的 render 函数 returns 一个具有 rerender 函数的对象，您可以使用它来使用更新的 props 重新渲染您的组件。

const { rerender } = render(<MemoizedComponent data={someData} />);
rerender(<MemoizedComponent data={someOtherData} />);

Answer 2

对于任何想知道的人，在 Jest/Enzyme 中，您可以使用 setProps() 执行此操作，这将强制 rerender/evaluation 备忘录的 'shouldUpdate' 条件，也称为回调。

如何使用 React 测试库测试记忆化组件的回调？

How to test a memoized component's callback using React Testing Library?

unit-testing

reactjs

react-testing-library

react-memo