testing-libraryreact测试组件state的五个用例代码

以下是测试组件state的五个用例代码：

测试组件初始状态是否正确

import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  test('should have initial state of 0', () => {
    const { getByTestId } = render(<MyComponent />);
    const countValue = getByTestId('count-value');
    expect(countValue.textContent).toBe('0');
  });
});

测试组件状态是否能够正确更新

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

describe('MyComponent', () => {
  test('should update state when button is clicked', () => {
    const { getByTestId } = render(<MyComponent />);
    const countValue = getByTestId('count-value');
    const button = getByTestId('button');
    fireEvent.click(button);
    expect(countValue.textContent).toBe('1');
  });
});

测试组件状态更新后能否正确渲染

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

describe('MyComponent', () => {
  test('should render updated state value', () => {
    const { getByTestId } = render(<MyComponent />);
    const countValue = getByTestId('count-value');
    const button = getByTestId('button');
    fireEvent.click(button);
    expect(countValue.textContent).toBe('1');
    fireEvent.click(button);
    expect(countValue.textContent).toBe('2');
  });
});

测试组件状态能否正确传递给子组件

import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  test('should pass state value to child component', () => {
    const { getByTestId } = render(<MyComponent />);
    const childComponent = getByTestId('child-component');
    expect(childComponent.textContent).toBe('Count value: 0');
  });
});

测试组件状态能否根据条件正确更新

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

describe('MyComponent', () => {
  test('should update state based on condition', () => {
    const { getByTestId } = render(<MyComponent />);
    const countValue = getByTestId('count-value');
    const button = getByTestId('button');
    fireEvent.click(button);
    expect(countValue.textContent).toBe('1');
    fireEvent.click(button);
    expect(countValue.textContent).toBe('2');
    fireEvent.click(button);
    expect(countValue.textContent).toBe('2');
  });
});
``