如何使用 Jest 和 react-testing-library 测试 useRef? [英] How to test useRef with Jest and react-testing-library?

问题描述

我正在使用 create-react-app、Jest 和 react-testing-library 来配置聊天机器人项目.

我有一个使用 useRef 钩子的功能组件.当一条新消息到来时，会触发 useEffect 钩子并通过查看 ref 的当前属性引发滚动事件.

const ChatBot = () =>{const chatBotMessagesRef = useRef(null)const chatBotContext = useContext(ChatBotContext)const { 聊天，输入 } = chatBotContextuseEffect(() => {if (typeof chatMessagesRef.current.scrollTo !== 'undefined' && chat && chat.length > 0) {chatBotMessagesRef.current.scrollTo({顶部:chatMessagesRef.current.scrollHeight，行为:平稳"})}//eslint-disable-next-line}, [聊天，打字])返回 (<><ChatBotHeader/><div className='chatbot' ref={chatBotMessagesRef}>{聊天&&chat.map((message, index) => {return <ChatBotBoard answers={message.answers} key={index} currentIndex={index + 1}/>})}{打字&&<ServerMessage message='' 输入 isLiveChat={false}/>}

</>)}

我想测试一下，当有新的聊天项目或者打字来的时候，scrollTo函数是否被触发，你有什么想法吗?我找不到测试 useRef 的方法.

解决方案

您可以将 useEffect 移出组件，并将 ref 作为参数传递给它.类似的东西

const useScrollTo = (chatMessagesRef, chat) =>{useEffect(() => {if (typeof chatMessagesRef.current.scrollTo !== 'undefined' && chat && chat.length > 0) {chatBotMessagesRef.current.scrollTo({顶部:chatMessagesRef.current.scrollHeight，行为:平稳"})}}， [聊天])}

现在在你的组件中

import useScrollTo from '../..';//不管你的路径是什么const MyComponent = () =>{const chatBotMessagesRef = useRef(null);const { chat } = useContext(ChatBotContext);useScrollTo(chatBotMessagesRef, chat);//你的渲染..}

您的 useScrollTo 测试:

import useScrollTo from '../..';//不管你的路径是什么从@testing-library/react-hooks"导入 { renderHook }it('应该滚动', () => {常量引用 = {当前的: {滚动到:jest.fn()}}const chat = ['message1', 'message2']renderHook(() => useScrollTo(ref, chat))期望(ref.current.scrollTo).toHaveBeenCalledTimes(1)})

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 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)
})

这篇关于如何使用 Jest 和 react-testing-library 测试 useRef?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！