面试题：React组件测试工具Jest中如何对一个包含状态的React组件进行单元测试

Question

假设有一个简单的React计数器组件Counter，它有一个状态count用于记录当前计数，有一个按钮可以增加count的值。请使用Jest和React Testing Library编写单元测试，验证组件初始状态下count的值为0，以及点击按钮后count值会正确增加。

Answer 1

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter'; // 假设Counter组件路径

describe('Counter Component', () => {
  test('renders with initial count of 0', () => {
    render(<Counter />);
    const countElement = screen.getByText('Count: 0');
    expect(countElement).toBeInTheDocument();
  });

  test('count increases when button is clicked', () => {
    render(<Counter />);
    const button = screen.getByText('Increment');
    fireEvent.click(button);
    const countElement = screen.getByText('Count: 1');
    expect(countElement).toBeInTheDocument();
  });
});

假设Counter组件代码如下：

import React, { useState } from'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;