react单测用例 使用React Testing Library怎么模拟state

如果要模拟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函数获取了更新后的计数器元素，并进行断言