测试按钮单击 ReactJS 上是不是呈现另一个组件

Posted 2023-02-24

【中文标题】测试按钮单击 ReactJS 上是不是呈现另一个组件

【英文标题】：Test that another component is rendered on button click ReactJS测试按钮单击 ReactJS 上是否呈现另一个组件

【发布时间】：2021-09-16 13:14:42

【问题描述】：

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

组件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

);

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

拜托，我是测试新手，我该如何解决这个问题？ 谢谢你的意见

【参考方案1】：

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

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

这是一个简化的例子。

组件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();
);

【参考方案2】：

expect 函数只能是 DOM 元素，不能是 React 组件。

您可以通过在fireEvent.click(componentBButton) 调用之后识别<ComponentA> 来检查它是否在文档中。它是否具有id 或任何其他独特属性？

让我们想象下面是<ComponentA>的定义：

const ComponentA = () => 
  return (
    <div id="component_a">Hello World</div>
  );

我们现在可以使用component_a id 识别它并将其传递给我们的expect 函数：

expect(document.getElementById("component_a")).toBeInTheDocument();