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)