How to test useRef with Jest and react-testing-library?

Question

I'm using create-react-app, Jest and react-testing-library for the configuration of the chatbot project.

I have a functional component that uses useRef hook. When a new message comes useEffect hook is triggered and cause scrolling event by looking a ref's current property.

const ChatBot = () => {
  const chatBotMessagesRef = useRef(null)
  const chatBotContext = useContext(ChatBotContext)
  const { chat, typing } = chatBotContext

  useEffect(() => {
    if (typeof chatMessagesRef.current.scrollTo !== 'undefined' && chat && chat.length > 0) { 
       chatBotMessagesRef.current.scrollTo({
         top: chatMessagesRef.current.scrollHeight,
         behavior: 'smooth'
       })
    }
    // eslint-disable-next-line
  }, [chat, typing])

   return (
    <>
      <ChatBotHeader />
      <div className='chatbot' ref={chatBotMessagesRef}>
        {chat && chat.map((message, index) => {
          return <ChatBotBoard answers={message.answers} key={index} currentIndex={index + 1} />
        })}
        {typing &&
        <ServerMessage message='' typing isLiveChat={false} />
        }
      </div>
    </>
  )
}

I want to be able to test whether is scrollTo function triggered when a new chat item or typing comes, do you have any ideas? I couldn't find a way to test useRef.

You could mock the scrollTo function (using jest.fn()), add a new chat item and check if the mock is called. — vnglst
– vnglst, Commented Nov 30, 2019 at 18:01
But scrollTo function is instance of the current object which is the method of the ref, how can I mock scrollTo without mocking ref? — onuriltan
– onuriltan, Commented Dec 2, 2019 at 5:42
Ah yes that can be difficult, have you tried mocking it using: Element.prototype.scrollTo = jest.fn() — vnglst
– vnglst, Commented Dec 2, 2019 at 6:53
I tried that, but how can I react the element before render? I need to mock the ref somehow before render so that I can test it, it is a very odd case I guess, I also used jest.spyOn but that did not work either — onuriltan
– onuriltan, Commented Dec 2, 2019 at 8:01
This is a huge limitation of react testing library. The ref should just act as a ref. There is no point in writing a test if you are just mocking most of it. — Andrei Savin
– Andrei Savin, Commented Sep 29, 2022 at 18:35

onuriltan · Accepted Answer · 2019-12-09 09:00:08Z

25

+50

You can move your useEffect out of your component and pass a ref as a parameter to it. Something like

const useScrollTo = (chatMessagesRef, chat) => {
    useEffect(() => {
    if (typeof chatMessagesRef.current.scrollTo !== 'undefined' && chat && chat.length > 0) { 
       chatBotMessagesRef.current.scrollTo({
         top: chatMessagesRef.current.scrollHeight,
         behavior: 'smooth'
       })
    }
  }, [chat])
}

Now in your component

import useScrollTo from '../..'; // whatever is your path

const MyComponent = () => {
  const chatBotMessagesRef = useRef(null);
  const { chat } = useContext(ChatBotContext);

  useScrollTo(chatBotMessagesRef, chat);

  // your render..
}

Your useScrollTo test:

import useScrollTo from '../..'; // whatever is your path
import { renderHook } from '@testing-library/react-hooks'

it('should scroll', () => {
  const ref = {
    current: {
      scrollTo: jest.fn()
    }
  }
  const chat = ['message1', 'message2']

  renderHook(() => useScrollTo(ref, chat)) 

  expect(ref.current.scrollTo).toHaveBeenCalledTimes(1)
})

edited Dec 9, 2019 at 9:00

onuriltan

3,9385 gold badges28 silver badges40 bronze badges

answered Dec 6, 2019 at 5:07

Aritra Ghosh

6645 silver badges11 bronze badges

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

1 Comment

onuriltan Over a year ago

If I give a ref as a prop by creating it with const ref = React.createRef() it gives me error, but if I mock it like const ref = { current: { scrollTo: jest.fn() }} and give a mock chat array rather than taking it from the real context object, the test works and also it seems that I covered all the conditions in the ChatBot component that uses useScrollTo hook, so somewhat your answer leads me to correct my test!

Collectives™ on Stack Overflow

How to test useRef with Jest and react-testing-library?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related