测试按钮单击 ReactJS 时是否呈现另一个组件

Question

我在两个不同的文件中有两个独立的组件

组件A和组件B

我在ComponentB中有一个按钮

现在我想测试一下，当单击ComponentB中的特定按钮时， ComponentA应呈现如下：

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

test('Component A Comes up on Click of Component B button', () => {
  render(<ComponentB />);

  const componentBButton = screen.getByRole('button');
  
  fireEvent.click(componentBButton);
  
  expect(<ComponentA />).toBeInTheDocument(); //This throwing an error that receiver must be HTMLElement or SVGElement

});

不幸的是，我收到了Receiver must be HTMLElement or SVGElement这个expect(<ComponentA />).toBeInTheDocument();错误

请问，我是测试新手，请问如何解决这个问题？谢谢您的意见

Answer 1

UI 测试旨在测试渲染的输出，而不是代码的内部结构。换句话说，您不应该测试组件是否已渲染，而应该测试该组件渲染的内容是否在屏幕上。

例如，如果ComponentA呈现h1文本内容为“hello world”的标签，您可能需要测试该标签或文本是否在文档中。

这是一个简化的示例。

组分A

const ComponentA = () => <h1>hello world</h1>

组件B

const ComponentB = () => (
  <div>
    <p>My App</p>
    <ComponentA />
  </div>
);

测试

test('hello world is rendered to the screen', () => {
  render(<ComponentB />);
  
  // Asserts that the HTML ComponentA produces was actually rendered
  expect(screen.findByText('hello world')).toBeInTheDocument();
});