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

Question

I'm using React Testing Library with Jest to test my components. One of the components renders a table with data so I decided to use React.memo as suggested by the table library's author. I'm using it like this:

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

But when I see the test coverage the memo() callback isn't being covered by my tests:

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

  return true
}

Is there a way to change the props after the render so I can finish testing this memoized component? Thank you!

PaulMest · Accepted Answer · 2022-03-01 23:46:44Z

4

The render function from React Testing Library returns an object with a rerender function that you can use to rerender your component with updated props.

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

edited Mar 1, 2022 at 23:46

PaulMest

15.3k10 gold badges57 silver badges54 bronze badges

answered Dec 25, 2020 at 3:50

Juzer Zarif

3762 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Breno Baptista Over a year ago

Thank you! This answer helped me solve my problem. Here's the API referece in case anyone else wants to check this out: testing-library.com/docs/react-testing-library/api/#rerender

António Silva · Accepted Answer · 2022-05-23 08:33:26Z

1

For anyone wondering, in Jest/Enzyme you can do this with setProps(), which will force a rerender/evaluation of the memo's 'shouldUpdate' condition, aka callback.

edited May 23, 2022 at 8:33

answered May 23, 2022 at 8:32

António Silva

214 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related