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

Question

我正在使用带有 Jest 的 React 测试库来测试我的组件。其中一个组件使用数据呈现表格，因此我决定按照表格库作者的建议使用 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函数返回一个带有rerender函数的对象，您可以使用该函数用更新的 props 重新渲染组件。

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