在测试中模拟子react组件失败

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent />
    </div>
  );
};

export default ParentComponent;

import React from 'react';

const ChildComponent = () => {
  // 正常情况下，子组件会渲染一些内容
  return <div>Child Component</div>;
};

export default ChildComponent;

import React from 'react';
import { render, screen } from '@testing-library/react';
import ParentComponent from './ParentComponent';
import ChildComponent from './ChildComponent';

// 使用 Jest 的 mock 功能来模拟子组件
jest.mock('./ChildComponent', () => {
  return jest.fn(() => {
    throw new Error('Child component failed');
  });
});

test('renders ParentComponent and handles ChildComponent failure', () => {
  // 捕获控制台错误以避免测试失败
  const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});

  // 渲染父组件
  render(<ParentComponent />);

  // 检查父组件的内容
  expect(screen.getByText('Parent Component')).toBeInTheDocument();

  // 检查是否捕获到子组件的错误
  expect(consoleError).toHaveBeenCalledWith(expect.stringContaining('Child component failed'));

  // 恢复控制台错误
  consoleError.mockRestore();
});

consoleError.mockRestore();