Jest測試React Hooks的useCallback

useCallback 是 React Hooks 中的一個功能，它用于將函數包裝在一個記憶化的容器中，以避免不必要的重新渲染

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

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

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

import React, { useCallback } from 'react';

const MyComponent = ({ onClick }) => {
  const handleClick = useCallback(() => {
    onClick('Hello, World!');
  }, [onClick]);

  return (
   <button onClick={handleClick}>
      Click me
    </button>
  );
};

export default MyComponent;

3. 創建一個名為 MyComponent.test.js 的測試文件：

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should call onClick with "Hello, World!" when button is clicked', () => {
    const onClick = jest.fn();
    const { getByText } = render(<MyComponent onClick={onClick} />);

    fireEvent.click(getByText('Click me'));

    expect(onClick).toHaveBeenCalledWith('Hello, World!');
  });
});

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

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

5. 運行測試：

npm test

這個測試用例會檢查當按鈕被點擊時，onClick 函數是否被調用，并傳遞了正確的參數。注意，我們使用了 @testing-library/react 和 @testing-library/jest-dom 庫來簡化測試過程。