Jest測試React Hooks的useImperativeHandle

useImperativeHandle 是一個 React Hook，它允許你在使用 forwardRef 時自定義暴露給父組件的實例值。要使用 Jest 測試使用了 useImperativeHandle 的組件，你需要執行以下步驟：

1. 首先，確保已安裝并設置好所有必要的測試工具，如 @testing-library/react 和 @testing-library/jest-dom。
2. 創建一個使用 useImperativeHandle 的組件。例如，我們創建一個名為 CustomInput 的組件，它接收一個 ref 并提供一個 focus 方法：

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));

  return<input ref={inputRef} type="text" />;
});

export default CustomInput;

3. 編寫一個測試文件，例如 CustomInput.test.js，并導入相關庫和組件：

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import CustomInput from './CustomInput';

4. 在測試文件中，編寫一個測試用例，用于測試 useImperativeHandle 的功能：

test('should call focus method on CustomInput', () => {
  const handleFocus = jest.fn();
  const WrapperComponent = () => {
    const inputRef = useRef(null);

    const handleClick = () => {
      inputRef.current.focus();
    };

    return (
      <>
       <CustomInput ref={inputRef} />
       <button onClick={handleClick}>Focus Input</button>
      </>
    );
  };

  const { getByText, getByRole } = render(<WrapperComponent />);
  const button = getByText('Focus Input');
  const input = getByRole('textbox');

  input.focus = handleFocus;

  fireEvent.click(button);

  expect(handleFocus).toHaveBeenCalledTimes(1);
});

在這個測試用例中，我們創建了一個包裝組件 WrapperComponent，它將 CustomInput 的 ref 傳遞給按鈕的點擊事件。當點擊按鈕時，它會調用 CustomInput 的 focus 方法。然后，我們使用 Jest 的 fireEvent 函數模擬點擊事件，并檢查 handleFocus 是否被調用。

現在，你可以運行 npm test（或你配置的測試命令）來執行此測試用例，并確保 useImperativeHandle 的功能正常工作。