Jest測試React Hooks的useRef

jest 和 @testing-library/react 是兩個常用的庫，用于測試 React 組件

1. 首先，確保已安裝所需的依賴項：

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

2. 創建一個名為 MyComponent.js 的文件，其中包含使用 useRef 的 React 組件：

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef(null);

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

  return (
    <div>
     <input ref={inputRef} type="text" />
     <button onClick={handleClick}>Focus input</button>
    </div>
  );
};

export default MyComponent;

3. 在同一目錄下創建一個名為 MyComponent.test.js 的文件，編寫針對 MyComponent 的測試用例：

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

describe('MyComponent', () => {
  it('should focus the input field when the button is clicked', () => {
    render(<MyComponent />);

    const input = screen.getByRole('textbox');
    const button = screen.getByText('Focus input');

    expect(input).not.toHaveFocus();

    fireEvent.click(button);

    expect(input).toHaveFocus();
  });
});

4. 在 package.json 中添加測試腳本：

{
  "scripts": {
    "test": "jest"
  }
}

5. 最后，運行測試：

npm test

這將運行 MyComponent 的測試用例，并檢查點擊按鈕后輸入框是否獲得焦點。如果一切正常，您應該會看到類似于以下的測試結果：

PASS  ./MyComponent.test.js
  MyComponent
    ? should focus the input field when the button is clicked (28 ms)