首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

元素已从文档中删除,但jest仍能找到它

是因为jest使用了虚拟DOM(Virtual DOM)的概念。虚拟DOM是在内存中构建的一种轻量级的DOM表示,它可以在每次渲染时与实际的DOM进行比较,以确定需要更新的部分。

当元素从文档中删除时,实际的DOM会被更新,但虚拟DOM仍然保留对该元素的引用。这意味着,即使元素不再存在于文档中,jest仍然可以通过虚拟DOM找到它。

这种行为在测试中非常有用,因为它允许我们对已删除的元素进行断言和验证。例如,我们可以使用jest的断言方法来验证元素是否已被正确删除,或者是否已经从特定位置移除。

虚拟DOM的使用还可以提高测试的性能,因为它避免了每次渲染都需要与实际的DOM进行交互的开销。相反,jest只需要与虚拟DOM进行比较,这通常比与实际的DOM进行交互更快速。

总结起来,尽管元素已从文档中删除,但jest仍然能够找到它,这是因为jest使用了虚拟DOM的概念,它在内存中构建了一种轻量级的DOM表示,并通过与实际的DOM进行比较来确定需要更新的部分。这种机制不仅可以对已删除的元素进行断言和验证,还可以提高测试的性能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Jest:给你的 React 项目加上单元测试

Jest 是一款轻量的 JavaScript 测试框架,的卖点是简单好用,由 facebook 出品。本文就简单讲讲如何使用 Jest 对 React 组件进行测试。 为什么需要单元测试?...注释和文档容易忘记修改,测试用例的描述永远是准确的,因为不对就无法通过测试; 可测试性好的代码,往往可维护性更好。...Object.is 对比; toBeTruthy:是否为真值; not:对结果取反,比如 expect(val).not.beBe(otherVal) 表示两值不相等才通过测试; toContain:数组是否含有某个元素... Jest 本身并不支持 React 组件的测试 API,需要使用另外一个内置的 React Testing Library 库来测试 React 组件。...className', () => { const customCls = 'customBtn'; render(); // 找到按钮元素

2.9K20

Jest来给React完成一次妙不可言的~单元测试

官方文档在这里[6],如果要指定的话,如下值是对官方文档的简单摘录: •container:React Testing库将创建一个div并将该div附加到文档。而通过这个参数,可以自定义容器。...文档:https://testing-library.com/docs/dom-testing-library/api-queries#queries 你可能会想,这些问题是什么呢?...•getByPlaceholderText:搜索具有占位符属性的所有元素,并找到与作为参数传递的给定文本相匹配的元素。...•findBy:返回一个promise,该promise将在找到与给定查询匹配的元素时解析。如果未找到任何元素,或者在默认超时时间为4500毫秒后找到了多个元素,则承诺将被拒绝。...更新快照可以按 u ,或者将对应快照文件删除即可。 2.测试DOM元素 要测试DOM元素,首先必须查看TestElements.js文件。

14.9K33
  • 开源库架构实战——从0到1搭建属于你自己的开源库

    下面我们举个例子如何使用 Jest: 安装Jest $ npm i jest -D 添加配置文件: // jest.config.js # 在 jest.config.js 配置测试用例路径...专注于 ES6 模块的打包工具 针对 ES6 源码进行 Tree Shaking,移除只被定义没有被使用的代码 针对 ES6 源码进行 Scope Hoisting,以减少输出文件的大小和提升运行性能...Travis CI 的特性: Travis CI 提供的是持续集成服务,仅支持 Github,不支持其他代码托管。 需要绑定 Github 上面的项目,还需要该项目含有构建或者测试脚本。...工具选型 构建: webpack4 Rollup 测试工具: Jest 持续集成: Travis CI API 文档生成工具: JSDoc 代码规范: eslint prettier lint-staged...​ 随着项目迭代的过程,依赖人工去回归测试容易出错和遗漏,为了保证 mt-events 库的质量,以及实现自动化测试,我们引入了 Jest,因为集成了 JSDOM,用它模拟我们的事件库在浏览器环境执行的效果再合适不过了

    1.3K20

    【译】使用Enzyme和React Testing Library测试React Hooks

    如果你第一次使用Enzyme,我们之前发布过关于的文章,《Enzyme如何在React应用Jest一起使用》。我们可以用他们来深入测试React Hooks。...我们想要测试四点: 1、组件渲染 2、渲染时初始待办事项的展示 3、我们可以创建一个新的待办事项然后返回三个待办事项 4、我们可以删除一个初始的待办事项并且只留下一个 在你的src目录,创建一个名为...这将调用removeTodo()方法,该方法将删除被单击的item。然后检查我们拥有的item的数量,并且返回的的值。 这四个测试的源代码可以在GitHub上找到。...我们使用getTestId来返回元素的与data-testid匹配的节点。在这个例子里是元素。然后,我们检查总共有两个子元素(每个子元素是无序列表元素)。...因为我们只想删除一个项目,所以我们对集合的第一个项目触发一个click事件,应该删除第一个待办事项。这应该使待办事项子节点的长度等于1。 这些测试也可以在GitHub上找到

    4.1K30

    Jest 进行 JavaScript 测试

    测试分为三大类: 单元测试 集成测试 UI测试 在这个 Jest 教程,我们将仅涵盖单元测试,但在文章的最后,你将找到更多用于其他类型测试的资源。 什么是Jest?...默认情况下,Jest 希望在项目下名为 tests 的文件夹中找到测试文件。...匹配器的更多信息,请查看文档(https://jestjs.io/docs/en/getting-started))。...在一个实际项目中,你需要在另一个文件定义该函数并从测试文件中导入。 为了进行测试,我们将使用一个名为 filter 的原生 JavaScript 函数,它可以过滤掉数组元素。...在该文件夹,你将找到一堆文件,其中 /coverage/index.html 是代码覆盖范围的完整HTML摘要。 ?

    2.7K30

    Migrate From Vue-cli to Vite

    "module" src="/src/main.js"> 2️⃣ 最后,我们会从我们的替代路径图标 favicon.ico(vite会在您的公用文件夹为您找到该图标...'vite-plugin-vue2' export default defineConfig({ [...], server: { port: 8080, } }) 你将在此处找到所有可能的配置选项...:https://vitejs.dev/config/#config-file '@'别名 如果你在webpack中使用了别名导入文件,则现在你需要重新创建: import { defineConfig...参见官方文档:https://vitejs.dev/guide/env-and-mode.html#env-variables-and-modes 至于自定义环境变量,我们不再需要像以前那样为它们加上前缀...不幸的是,目前尚无针对单元测试的现成设置,此评论对我有所帮助: https://github.com/vitejs/vite/issues/1149#issuecomment-775033930 我的

    5.2K30

    也来扯扯 Vue 单元测试

    最近,我又放弃了这种组合,转而使用 Jest。在这连番的折腾,入过不少坑(当然,很多时候是自己挖坑自己跳),也解锁了不少新姿势。...本文主要扯一扯自己在完成这些单元测试,以及迁移到 Jest 过程的一些收获。文中并不会涉及非常具体的测试写法,因为这些教程官方文档已经做得很好了。...而使用 Jest 后,只要安装,全都搞定了。 全面的官方文档,易于学习和使用 Jest 的官方文档很完善,对着文档很快就能上手。...特别是对于监视文件变化并执行,提供多种模式,可以只执行修改过的测试。记得初次读到这部分文档时,我不禁仰天长啸,竟然有这么骚气凌人的操作?...这会导致一些问题,例如,如果组件代码中有一些根据实际渲染后的属性值进行计算(比如元素的 clientWidth)就可能出问题,因为 jsdom 这些参数通常默认是 0.

    1.8K30

    ElasticSearch,枯燥的基础知识讲完啦!该上 Java 客户端了!

    Low Level REST Client Java High Level REST Client TransportClient 大家在网上搜索 ElasticSearch 资料时,如果找到的是两年前的资料...Jest Jest 提供了更流畅的 API 和更容易使用的接口,并且的版本是遵循 ElasticSearch 的主版本号的,这样可以确保客户端和服务端之间的兼容性。...举个简单例子: 7.0 客户端能够与任何 7.x ElasticSearch 节点进行通信,而 7.1 客户端肯定能够与 7.1,7.2 和任何后来的 7.x 版本进行通信,与旧版本的 ElasticSearch...ElasticSearch 索引基本操作 ElasticSearch 文档的添加、获取以及更新 ElasticSearch 文档删除和批量操作 ElasticSearch 文档路由,你的数据到底存在哪一个分片上...ElasticSearch 复合查询,理解 Es 文档评分策略! 想搜索附近评分较高的餐厅,ElasticSearch 大显身手!

    2.3K00

    Sentry 开发者贡献指南 - 测试技巧

    整理自官方开发文档 目录 获取设置 Python 测试 运行 pytest 在测试创建数据 设置选项和功能标志 外部服务 可靠地使用时间 在测试检查 SQL 查询 验收测试 运行验收测试 定位元素...处理异步动作 视觉回归 处理不断变化的数据 Jest 测试 API Fixtures CI 的 Kafka 测试 更多 作为 CI 流程的一部分,我们在 Sentry 运行了多种测试。...有关更多使用选项,请参阅 pytest 文档。...定位元素 因为我们使用 emotion,所以我们的类名通常对浏览器自动化没有用。相反,我们自由地使用 data-test-id 属性来定义浏览器自动化和 Jest 测试的 hook 点。...虽然我们对视觉回归有相当广泛的覆盖,仍有一些重要的盲点: 悬停(Hover)卡片与悬停状态 模态窗口 图表和数据可视化 所有这些组件和交互通常不包含在可视化快照,您在处理其中任何一个时都应该小心。

    1.7K50

    QQ音乐商业化Web团队前端工程化实践总结

    元素(element):是.block的后代,和块一起形成一个完整的实体。 修饰符(modifier):代表一个块的状态,表示持有的一个特定属性。...极大减少人工保证代码和文档一致性的工作: JSDoc:根据.js文件的注释信息,生成API文档。...立刻部署合并后的master分支代码,删除该分支。...“我的模块没问题的,是你的模块出了问题” ——程序每一项功能我们都用测试来验证的的正确性,快速定位出现问题的某一环。...sideEffects Tree Shaking可以在构建的时候去除冗余代码,减少打包体积,这是一个非常危险的行为,在webpack4,可以在package.json明确声明该包/模块是否包含sideEffects

    4.3K112

    如何解决React官方脚手架不支持Less的问题

    以上只是在项目中安装了 less 和 less-loader ,还未曾通过 webpack 使用 less-loader。 至于怎么使用?几种使用方式?...请参见 webpack 文档 ,这里不再赘述。 假定您已经仔细阅读过上述 webpack 文档,想必您也清楚我们应该选择在webpack.config.js文件配置 less-loader。...大概意思是,执行该命令后会把已构建依赖项、配置文件和脚本复制到程序目录。该操作是不可逆转的,执行完成后会删除这个命令,也就是说只能执行一次。...修改 webpack 配置 理论上讲,需要同步修改 webpack.config.dev.js 和 webpack.config.prod.js 配置文件: 在module.rules节点中找到 css...(css|less)$/; 在use数组最后新增一个对象元素{loader: require.resolve('less-loader')}。

    1.9K30

    用于浏览器中视频渲染的时间管理 API

    对于视频元素,仅依靠布尔值的真假来播放或者停顿。对于像导出按钮、项目总时间的显示这类元素,将利用存储在项目状态的持续时间属性来计算。当用户插入和删除元素时,这个属性都会进行更新。...每当插入一个元素时,会重新计算当前画布上持续时间最长的元素,然后将项目的持续时间设定为该值,删除项目时也同理。...因此,会有一些从核心播放状态的派生状态,比如字幕和时间码;也有一些基于状态更改的命令式调用,比如视频元素;在项目持续时间的情况下,有同步状态,比如添加元素时,需要一个主要更新函数,还需要一个函数来以一种命令式的...画布上的不同元素都代表一个不同的场景,按照场景的时间的长度对场景进行排序。这意味着每当我们从场景添加或者删除一个项目时,就需要重新计算更新的持续时间。...同理当播放暂停,有人删除场景时,也需要重新计算活动场景;当删除场景的特定元素时,仍需要重新计算持续时间,删除元素会影响场景以及更多的其他同步状态值,使得更新不能及时。这个弊端是无法控制的。

    2.3K10

    Helm3部署安装

    5.用于在OCI注册表存储Helm图表的实验支持(例如Docker Distribution)可以进行测试。     6.现在在升级Kubernetes资源时将应用3向战略合并补丁。     ...二、 Helm3的内部实现已从 Helm2发生了很大变化,使其与 Helm2不兼容 该版本主要变化如下 1、最明显的变化是 Tiller的删除 2、Release 不再是全局资源,而是存储在各自命名空间内...6、Helm CLI 个别更名 helm delete更名为 helm uninstall helm inspect更名为 helm show helm fetch更名为 helm pull 以上旧的命令当前仍能使用...打开包装 tar -zxvf helm-v3.0.0-linux-amd64.tgz   3.helm在解压后的目录中找到二进制文件,然后将其移至所需的目标位置 mv linux-amd64/helm...8.删除存储库: helm repo remove aliyu

    5.1K10

    使用storybook管理React组件

    测试UI组件 4.1 写测试用例的原因 找到bug 新修改没有改变已有的接口和功能 将测试用例作为文档 4.2 测试结构 使用storyshots插件来实现,其核心是使用Jest,原理是每次生成一份DOM...结构文档(类似于html源码),可以无痛集成到组件测试。...PS:下次运行Jest时,只有DOM结构与上次完全一致测试才会通过,通常会有两种方法来解决这种情况: 找到问题,修复不同; 用新的DOM结构替换旧的。...Storybook Github源码 Storybook 官方网站 Jest官方文档 puppeteer官方文档 7....写在最后 本文是作者学习storybook的一些总结,总体感觉是接入成本不算高,但是模块包版本安装可能会有一些坑,收获是给组件的管理、文档和测试提供了一个一体化的解决方案,还是很值得的。

    3.4K20

    你不知道的 Vue 单元测试(6000字实战单元测试)

    介绍 Vue-Test-Utils 是 Vue.js 官方的单元测试实用工具库,提供了一系列的 API 来使得我们可以很便捷的去写 Vue 应用的单元测试。...主流的单元测试运行器有很多,比如 Jest、Mocha 和 Karma 等,这几个在 Vue-Test-Utils 文档里都有对应的教程,这里我们只介绍 Vue-Test-Utils + Jest 结合的示例...不过你需要一个能够将单文件组件导入到测试的预处理器。我们已经创建了 vue-jest 预处理器来处理最常见的单文件组件特性,仍不是 vue-loader 100% 的功能。...这里我选择的是配置在 jest.config.js : module.exports = { moduleFileExtensions: [ 'js', 'vue...expect(wrapper.vm.toDoList[0]).toBe('绕着公园跑3圈') }) 先用 setData 给 toDoList 设置一个初始值,使其渲染出一个列表项;然后找到这个列表项

    11.4K41

    Salesforce LWC学习(二十五) Jest Test

    三. jest 语法实现 jest语法根据不同的js内容复杂度以及难易程度不同,篇头链接为官方文档包含了各种场景,下面只是讲一个最基础的官方的demo来抛砖引玉。.../sum原因是 sum.js在__test__同层,所以需要先找到同层以后在引入; describe是jest封装好的一个API,可以查看一下此链接:https://jestjs.io/docs/en/...因为jest test运行是不需要基于浏览器的,我们在测试这种和页面交互的js时,下面会进行一些创建元素节点操作,所以当测试完相关以后,我们需要重置之前的DOM信息,以便不影响其他的test测试。...搜索到相关的元素内容进行断言操作。...Jest Test来确定javascript的稳定性以及正确性,最好先熟练掌握 Jest Test文档

    1.1K30
    领券