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 库来简化测试过程。