React 单元测试：使用 React Testing Library 模拟状态

如果要模拟 React 组件的状态 (state)，可以使用 React Testing Library 中的 render 函数和 fireEvent 函数。

首先，使用 render 函数渲染组件，并获取组件的实例对象。然后使用 fireEvent 函数模拟用户交互事件，例如点击、输入等操作，从而改变组件的状态。最后，使用 getBy 或 queryBy 等函数获取组件中的元素，判断组件的状态是否已经改变。

以下是一个使用 React Testing Library 模拟 state 的示例代码：

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

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <div>{count}</div>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

test('increment count', () => {
  const { getByText } = render(<Counter />);  
  const incrementButton = getByText('Increment');
  fireEvent.click(incrementButton);
  const countElement = getByText('1');
  expect(countElement).toBeInTheDocument();
});

在上面的代码中，我们使用 render 函数渲染 Counter 组件，并获取了 Increment 按钮的实例对象 incrementButton。然后使用 fireEvent.click 函数模拟点击事件，从而触发 handleIncrement 函数，改变了组件的状态。最后，使用 getByText 函数获取了更新后的计数器元素，并进行断言。