Trung tâm cá nhân
sách gpt4 ai đã đi

reactjs - 测试在按钮上呈现另一个组件单击 ReactJS

In lại 作者：行者123 更新时间：2023-12-04 14:50:14 35 4
mua khóa gpt4 Nike

我在两个不同的文件中有两个单独的组件
组件A Và 组件B
我在 中有一个按钮组件B
现在我想测试当 中的特定按钮时组件B 被点击，组件A 应呈现如下:

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

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

});
不幸的是，我收到此错误 Receiver must be HTMLElement or SVGElementhiện hữu expect().toBeInTheDocument();线
拜托，我是测试新手，我该如何解决这个问题？
谢谢您的意见

1 Câu trả lời

UI 测试旨在测试呈现的输出，而不是代码的内部结构。换句话说，你Không nên测试组件是否已呈现，但您 应该测试该组件渲染的内容是否在屏幕上。
例如，如果 ComponentA呈现 h1带有文本内容“hello world”的标签，您可能想要测试该标签或文本是否在文档中。
这是一个简化的示例。
组件A

const ComponentA = () => 
hello world

组件B 
const ComponentB = () => (
  

    
My App

    
  

);
Bài kiểm tra 
test('hello world is rendered to the screen', () => {
  render();
  
  // Asserts that the HTML ComponentA produces was actually rendered
  expect(screen.findByText('hello world')).toBeInTheDocument();
});

关于reactjs - 测试在按钮上呈现另一个组件单击 ReactJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69209144/

35 4 0
Bài viết được đề xuất: python - pydoc 将 python 子模块内容注入(inject)主模块
Bài viết được đề xuất: arrays - 二维scala数组迭代
Bài viết được đề xuất: trading - 谁能推荐一个外汇交易API？
Bài viết được đề xuất: c++ - 如何编写从函数参数推断的 C++ 模板？
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com