为什么React需要jsdom来测试?

2024-04-10

在为 React 组件编写测试时,您必须将它们渲染到 DOM 中,以便断言它们的正确性。例如,如果您想测试某个类是否已添加到给定状态的节点,则必须渲染到 DOM 节点,然后通过普通 DOM API 检查该 DOM 节点。

问题是,考虑到 React 维护一个用于渲染的虚拟 DOM,为什么我们不能在渲染组件后就在虚拟 DOM 上断言呢?在我看来,这似乎是拥有虚拟 DOM 之类的东西的一个很好的理由。

我错过了什么吗?


你并没有真正错过任何事情。我们正在努力改进这一点。虚拟部分一直是 React 的实现细节,没有以任何有用或可靠的方式公开用于测试。我们的测试助手中有一些方法可以封装内部查找,有时可以避免查看实际的 DOM,但我们需要更多。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么React需要jsdom来测试? 的相关文章

  • ajaxStop() 不触发

    这是不起作用的代码 document ajaxStop function this unbind ajaxStop prevent running again when other calls finish Display everythi
  • 在 javascript、jQuery 或 css 中,如何让 div 或 iframe 展开以填充其余空间

    我有三个 iframe 我将顶部 iframe 设置为 50px 高度 将底部 iframe 设置为 50px 但我希望中间 iframe 扩展以填充其余空间 有没有一种技术可以用来对任何窗口屏幕尺寸执行此操作 谢谢 example
  • FakeAsync/tick (Async/whenStable) 与 detectorChanges()

    您能帮我区分这两件事吗 根据我的理解 如果你只使用 observable 你可以使用 detectorChanges 因此 您可以直接更改组件属性或监视服务调用并返回可观察的值 然后调用 detectorChanges 更改将在 html
  • Web 组件 - 服务/非 html 组件

    所以我来自 Angular 想看看如何创建vanilla Web components 现在 从 Angular 开始 我们倾向于将事物分开 组件 充当 HTML CSS 和一些 javascript 然后是 服务 主要负责收集数据和执行不
  • 搜索深度嵌套数组以更新对象

    我有一个深层嵌套的数据结构 我有兴趣匹配数组 和数组数组 中的某个值 然后将一些数据推送到随附的数组中 例如以下是我的数组colors并伴随着的是更多颜色数组可能存在也可能不存在 var myData color green moreCol
  • 使用 JUnit 时,有没有办法验证测试方法中是否调用了 try/catch 指令的 Catch 部分?

    例如 如果我想测试以下课程 public class SomeClass public void someMethod try Some code where comething could go wrong catch Exception
  • 将文本大小调整为矩形 在 Canvas HTML5 中调整大小

    我是 Canvas 新手 我正在创建一个网站 以在调整矩形大小时增加文本 我尝试了很多 但没有任何效果 实际上 我希望如果我仅按其宽度调整矩形大小 向左拉伸 向右拉伸 则仅应增加文本宽度而不是字体大小 我已经完成了字体大小 但发现增加孤立文
  • 使用 JavaScript 生成 PDF 文件

    我正在尝试将 XML 数据从网页转换为 PDF 文件 并且希望能够完全在 JavaScript 中完成此操作 我需要能够绘制文本 图像和简单的形状 我希望能够完全在浏览器中完成此操作 我刚刚写了一个名为jsPDF https github
  • 通过JS Laravel访问存储目录

    有没有办法访问storage目录 该目录已经链接到publicJS 中的目录 我正在尝试制作一个上传图片的表单 验证脚本 if request gt hasFile photos marker gt photos request gt ph
  • 如何从 JSON 响应重定向?

    所以我尝试使用 Flask 和 Javascript 上传器 Dropzone 上传文件并在上传完成后重定向 文件上传正常 但在烧瓶中使用传统的重定向 return redirect http somesite com 不执行任何操作 页面
  • 了解 JavaScript - 资源

    使用 StackOverflow 的微型 Digit Blog 功能进行描述here https stackoverflow com about 我想发布以下我刚刚看到的 我觉得很有趣的谷歌技术谈话视频 我一直在理解 javascript
  • 在管道中重用变量的功能方式

    在 javascript 和 typescript 中与 Ramda 一起使用函数式编程 我经常发现自己编写如下代码 const myFun c gt const myId c id const value pipe getAnotherO
  • 如何使用 vanilla JS 实现可维护的反应式 UI

    今天我遇到了一个问题 可以通过使用像 Vue 这样的反应式和状态管理框架来轻松解决 遗憾的是 无法使用它 以下 简化 情况 链接到代码笔 https codepen io theiaz pen BazErKV 我们有一个服务器渲染的页面 其
  • 计算文本选择的 xy 位置

    我正在尝试使用 DOM 元素创建自己的文本选择 是的 我的意思是当您在此元素中选择文本时 您会在文本后面看到蓝色背景 这个想法是停止默认行为 蓝色 并使用我自己的元素来完成工作 方法是找到选择的 xy 位置 然后放置绝对定位的元素 我希望能
  • 从 DirectionsRenderer 中获取折线或标记的事件

    我正在使用 DirectionsService 和路线方法来生成 DirectionsResult 我还使用 DirectionsRenderer 对象来显示结果 因为它非常易于使用 我在检测 Directions changed 事件时没
  • IE 中的每个 JavaScript 支持?

    我有这个代码
  • useParams 钩子在 React 功能组件中返回未定义

    该应用程序显示所有照片
  • mozilla pdf.js 没有全视图

    我喜欢这个 pdf 查看器https github com mozilla pdf js https github com mozilla pdf js Demo http mozilla github com pdf js web vie
  • Node.js - 重载函数

    有没有一种方法可以重载node js中的函数 类似于 noSuchMethod https developer mozilla org en JavaScript Reference Global Objects Object noSuch
  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘

随机推荐

  • 更高级别的 Python GUI 工具包,例如为 TreeView/Grid 传递字典

    使用 PyGTK 启动了我的第一个 Python pet 项目 虽然它是一个非常强大的 GUI 工具包并且看起来很棒 但我还是有一些烦恼 所以我考虑转向其他东西 因为它还不太广泛 环顾四周SO https stackoverflow com
  • 使用 openat 重新打开目录

    看起来 可以使用openat to re打开一个已经打开的目录 例如 在我的 Linux 系统上我可以执行以下操作 define GNU SOURCE include
  • 服务器和本地之间的 Mercurial?

    我正在进行一个门户开发工作 我有时会遇到一些麻烦 例如丢失 覆盖错误的文件等 所以我决定使用 Mercurial 来进行此开发 我第一次使用源代码管理的经历 我在这个项目的服务器 bluehost 上工作 有什么办法可以在本地保存更新备份吗
  • 跨线程Winforms控件编辑[重复]

    这个问题在这里已经有答案了 如果编辑文本的代码 属于 与包含 Windows 窗体的线程不同的线程 如何编辑 Windows 窗体元素中的文本 我得到了例外 跨线程操作无效 控制 textBox1 是从创建它的线程以外的线程访问的 谢谢 您
  • Python 求和 excel 文件

    我有一个包含 3 列的 Excel 文件 请举例如下 Name Produce Number Adam oranges 6 bob Apples 5 Adam Apples 4 steve Peppers 7 bob Peppers 16
  • 读取 ELF 部分的内容(以编程方式)

    我正在尝试检索 ELF 二进制文件中附加部分的内容 此时 我使用以下代码来检索每个部分的名称 include
  • jQuery 验证 - 隐藏错误消息

    我正在使用 jQuery 验证插件 并希望禁用它创建的或元素 容器来显示错误 消息 基本上 我希望带有错误的输入元素具有错误类 但不创建包含错误消息的附加元素 这可能吗 我刚刚想到了 CSS 解决方法 但它并没有真正解决元素仍在创建的事实
  • Spring Cloud Sleuth-获取当前的traceId?

    我正在使用 Sleuth 我想知道是否可以获取当前的 TraceId 我不需要添加任何回复或任何内容 我只想要在某些情况下向开发团队发出警报的电子邮件的traceId Ex import brave Span import brave Tr
  • 如何在 gitlab CI 中检测编译器警告

    在我们的 gitlab 服务器上设置 CI 构建的步骤中 我似乎找不到有关如何设置编译器警告检测的信息 构建输出示例 100 Building CXX object somefile cpp o home gitlab runner bui
  • 将数据从 Dynamodb 发送到 Amazon Elasticsearch 的最佳方式

    我想知道将数据从 dynamoDB 发送到 elasticsearch 的最佳方式是什么 AWS SDK js https github com Stockflare lambda dynamo to elasticsearch blob
  • Android:从另一个活动返回时避免调用 onCreate()

    假设我的应用程序包含两个活动 A 和 B 两者在 AndroidManifest 中都仅限于纵向 活动 A 启动活动 B 在Activity B中 有一个按钮 它调用finish 当点击时 问题是 当我垂直握住设备 纵向 并单击按钮时 调用
  • DT Shiny 中单列的渲染下拉列表

    我不精通 Javascript 并且想复制下拉菜单中提供的功能兰森塔布尔 https jrowen github io rhandsontable dropdown autocomplete包但对于DT https rstudio gith
  • 将 IEnumerable 对象序列化为字符串数组的扩展方法?

    我的最后一个问题是关于将对象的字符串表示形式序列化为 XML https stackoverflow com questions 1138414 can i serialize xml straight to a string instea
  • 为什么我的 dockerfile 不复制目录

    在我的 dockerfile 中我有这两行 ADD ansible inventory etc ansible hosts ADD ansible ansiblerepo 第一行有效 因为我可以运行容器并看到我的主机文件已填充了清单文件中的
  • 使用 getElementsByName() 设置选项值

    拥有这个字段集 fieldset legend death legend fieldset
  • 如何从 javascript 中的 API 调用返回值到 React 组件

    我似乎无法将 javascript 中此 API 调用的值返回到我的 React 组件 我有一个调用 API 的 java 脚本文件 在js文件中 返回结果 但是当我在react组件中调用useEffect中的js函数时 它返回未定义 ex
  • ctags 多行 C 函数原型

    ctags 有没有办法处理 C 中的多行函数原型 我四处寻找 fields S应该做多行原型 但我无法让它工作 ctags x c kinds pf fields S file file int foo int x int y ctags
  • django QueryDict 仅返回列表的最后一个值

    使用 django 1 8 我观察到一些奇怪的事情 这是我的 JavaScript function form submit var form form1 id request post this attr action form seri
  • 面向对象的 CSS:这重要吗? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我刚刚发现这个有趣的演示 http www slideshare net stubbornella object oriented css ty
  • 为什么React需要jsdom来测试?

    在为 React 组件编写测试时 您必须将它们渲染到 DOM 中 以便断言它们的正确性 例如 如果您想测试某个类是否已添加到给定状态的节点 则必须渲染到 DOM 节点 然后通过普通 DOM API 检查该 DOM 节点 问题是 考虑到 Re