Testing Library
文章平均质量分 67
liangshanbo1215
这个作者很懒,什么都没留下…
展开
-
jest-dom
testing-library/jest-dom 可以与任何从查询中返回 DOM 元素的库或框架一起使用。以下自定义匹配器示例是使用 @testing-library 套件中的匹配器(例如 getByTestId、queryByTestId、getByText 等)编写的。从用户的角度来检查,一个元素是否被禁用。buttoninputselecttextareaoptgroupoptionfieldset和自定义元素。原创 2024-03-15 10:35:49 · 1117 阅读 · 0 评论 -
React 测试库 - FAQ
遵循这个库的指导原则,理解测试是如何围绕用户体验和与应用功能的交互来组织的,而不是围绕具体的组件本身,这是很有用的。我不想让我的测试等待动画结束。这看起来比浅渲染(shallow rendering)需要更多的工作(实际上也确实如此),但只要你模拟的东西足够接近你要模拟的东西,它就会给你更多的信心。由于用户不能直接与您的应用程序的组件实例进行交互,断言其内部状态或它们渲染的组件,或调用其内部方法,因此在测试中进行这些操作会降低它们能够给予的信心。你的测试越接近你的软件使用方式,它们能给你的信心就越多。原创 2024-03-19 01:00:00 · 1574 阅读 · 0 评论 -
React 测试库 - API
也会重新导出渲染到到 document.body 的容器中。原创 2024-03-18 01:00:00 · 1184 阅读 · 0 评论 -
React 测试库 - 入门
React Testing Library是在DOM Testing Library的基础上添加了用于处理 React 组件的 API。使用 Create React App 创建的项目默认支持 React Testing Library。如果不是这样,你可以通过 npm 添加它,如下所示:npm install --save-dev @testing-library/react// yarnyarn add --dev @testing-library/reactReact Tes原创 2024-03-17 06:30:00 · 512 阅读 · 0 评论 -
User Actions
为了解决这些问题,或者如果你需要在你的代码中依赖特定的时间戳,大多数测试框架都提供了用虚拟定时器替换测试中的实际定时器的选项。这是创建DOM事件的便捷方法,然后可以通过 fireEvent 来触发这些事件,使您能够引用所创建的事件:如果您需要访问无法通过编程方式初始化的事件属性(例如timeStamp),那么这可能很有用。如果一个元素被聚焦,那么就会派发一个聚焦事件,文档中的活动元素会发生变化,之前被聚焦的元素会变得模糊。触发这些事件时,你需要引用 DOM 中的一个元素和你要触发的键。原创 2024-03-16 01:00:00 · 928 阅读 · 0 评论 -
ByTestId
DOM 测试库中的 ...ByTestId 函数默认使用 data-testid 属性,这是遵循 React Native Web 的先例,后者使用 testID 属性在元素上发布 data-testid 属性,我们建议您在可能的情况下采用该属性。但是,如果您已经有一个现有的代码库,它使用不同的属性来实现此目的,您可以通过 configure({testIdAttribute: 'data-my-test-attribute'}) 覆盖此值。)的快捷方式(并且它还可以接受TextMatch)。原创 2024-03-14 09:26:56 · 589 阅读 · 0 评论 -
ByTitle
返回具有匹配标题属性的元素。还将在SVG中查找标题元素。原创 2024-03-14 09:22:49 · 361 阅读 · 0 评论 -
ByAltText
这将返回具有给定alt文本的元素(通常是<img>)。请注意,它仅支持接受alt属性或自定义元素的元素(因为我们不知道自定义元素是否实现了alt):<img>、<input>和<area>(故意排除<applet>因为它已被弃用)。原创 2024-03-14 09:20:35 · 349 阅读 · 0 评论 -
ByDisplayValue
如果是select,这将搜索一个匹配给定 TextMatch 的选定<option>的<select>。返回具有匹配显示值的 input、textarea 或 select 元素。原创 2024-03-15 01:00:00 · 683 阅读 · 0 评论 -
ByText
这将搜索所有具有文本节点并且textContent与给定的TextMatch匹配的元素。有关如何使用和何时使用选择器选项的更多详细信息,请参阅 getByLabelText。原创 2024-03-14 01:00:00 · 1109 阅读 · 0 评论 -
ByPlaceholderText
这将搜索所有带有占位符属性的元素,并找到与给定的 TextMatch 匹配的元素。注意:占位符不能代替标签,因此你通常应该使用 getByLabelText 代替。原创 2024-03-13 09:56:58 · 322 阅读 · 0 评论 -
ByLabelText
上面的例子没有找到由元素分隔的标签文本的输入节点。你可以使用 getByRole('textbox', { name: 'Username' }) 代替,它对于切换到 aria-label 或 aria-labelledby 是很稳健的。这将搜索与给定的 TextMatch 相匹配的标签,然后找到与该标签相关联的元素。原创 2024-03-13 09:55:11 · 291 阅读 · 0 评论 -
ByRole
您可以通过调用 getByRole('link', { current: 'page' }) 来获取“👍”链接,通过调用 getByRole('link', { current: false }) 来获取“👎”链接。一个范围小部件可以通过任何值 getByRole('spinbutton') 或使用 level 选项 getByRole('spinbutton', { value: { now: 5, min: 0, max: 10, text: 'medium' } }) 来查询特定的值。原创 2024-03-13 00:45:00 · 908 阅读 · 0 评论 -
Testing Library - About Queries
Queries 是测试库提供给你的在页面上查找元素的方法。有几种类型的查询(“get”、“find”、“query”);它们之间的区别在于,如果找不到元素,查询是否会抛出错误,或者是否将返回一个Promise 并重试。根据你选择的页面内容,不同的查询可能更合适或不太合适。请参阅优先级指南,了解如何使用语义查询以最可访问的方式测试你的页面。选择元素后,你可以使用事件API或用户事件来触发事件并模拟用户与页面的交互,或者使用Jest和jest-dom对元素进行断言。有一些与查询一起工作的测试库辅助方法。原创 2024-03-12 19:20:49 · 884 阅读 · 0 评论