如何使用React测试库测试HTML内容

// MyComponent.js
import React from 'react';

function MyComponent({ message }) {
  return (
    <div data-testid="my-component">
      <h1>{message}</h1>
    </div>
  );
}

export default MyComponent;

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

test('renders message correctly', () => {
  const message = 'Hello, World!';
  render(<MyComponent message={message} />);

  // 使用 getByTestId 查询元素
  const myComponentElement = screen.getByTestId('my-component');

  // 使用 getByText 查询子元素
  const h1Element = screen.getByText(message);

  // 断言元素存在
  expect(myComponentElement).toBeInTheDocument();
  expect(h1Element).toBeInTheDocument();
});

npm test

import { render, screen, waitFor } from '@testing-library/react';

test('renders async data correctly', async () => {
  const fetchData = jest.fn(() => Promise.resolve('Async Data'));
  render(<MyComponent fetchData={fetchData} />);

  await waitFor(() => expect(screen.getByText('Async Data')).toBeInTheDocument());
});

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

test('handles button click', () => {
  const handleClick = jest.fn();
  render(<MyComponent onClick={handleClick} />);

  fireEvent.click(screen.getByText('Click Me'));

  expect(handleClick).toHaveBeenCalledTimes(1);
});