☰

Jestとreact-testing-libraryでuseRefをテストするにはどうすればいいですか？質問する

tag-icon • tag-icon reactjs jestjs react-testing-library
Jestとreact-testing-libraryでuseRefをテストするにはどうすればいいですか？質問する

チャットボット プロジェクトの構成には、create-react-app、Jest、react-testing-library を使用しています。

useRef フックを使用する機能コンポーネントがあります。新しいメッセージが来ると、useEffect フックがトリガーされ、ref の現在のプロパティを参照してスクロール イベントが発生します。

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

新しいチャット項目や入力があったときに scrollTo 関数がトリガーされるかどうかをテストできるようにしたいのですが、何かアイデアはありますか? useRef をテストする方法が見つかりませんでした。

ベストアンサー1

useEffectコンポーネントから移動して、refをパラメータとして渡すことができます。

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

あなたのコンポーネントで

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

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

  useScrollTo(chatBotMessagesRef, chat);

  // your render..
}

useScrollTo テスト:

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

おすすめ記事