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

Question

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

ComponentA 和 ComponentB

我在 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

拜托，我是测试新手，我该如何解决这个问题？感谢您的输入

Answer 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();
});

Answer 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();

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

Test that another component is rendered on button click ReactJS

ui-testing

reactjs

react-testing-library