I have a page and it scrolls down to a certain div when the page loads. My implementation for that is as follows.

 const creditCardDetails = useRef(null);

 useEffect(() => {
    creditCardDetails.current.scrollIntoView();
  }, []);



<div
    data-testid="credit-card-details-container"
    ref={creditCardDetails}
    style={{
      height: '100px',
      backgroundColor: '#F6F6F6',
    }}
  >
    <span>***Test container***</span>
</div>

I want to write a test for this. So far i tried something like this

const scrollIntoViewMock = jest.fn();
window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;

  it('should scroll down to card container', async () => {
    const { baseElement } = render(
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <Payment />
        </ThemeProvider>
      </Provider>,
    );
    expect(scrollIntoViewMock).toBeCalled();
  });

But it doesn't help the code coverage so i'm assuming it does not test properly. How do i test if the scrolling happens when the page loads. Thanks in advance.