因为我们是在命令行中跑测试,而不是在浏览器中进行测试, 渲染使用@testing-library/react, 提供了渲染方法。查看内容,则是Jest内置了jsdom, jsdom提供了DOM的无头实现,也就是说在命令行中跑测试,在测试中仍然可以获取到document, document.body 等DOM 元素,也就可以使用documet.getElementId() 等DOM 方法来查出...
TestingLibraryElementError: Unable to find an accessible element with the role "blah" Here are the accessible roles: button: Name "Hello World": --- Hello World 这里要注意的是,我们并没有为 设置Role 而加上 role=button。因为这是隐式的 Role,下一节会详细说明。 建议:阅读...
Testing: import Reactfrom'react'import { render, within }from'@testing-library/react'import { Modal }from'../extra/modal'import'@testing-library/jest-dom/extend-expect'test('modal shows the children', () =>{ render(<Modal> </Modal>, )//get element only in modal-rootconst { getByTes...
使用react-testing-library测试的时候你需要做的是通过触发事件如:拉取数据、点击按钮,输入文本等事件来渲染出组件 html-dom,然后通过使用 getByText, getByPlaceholder, getByRole 等方法获取到组件渲染后的html-dom,取其 value 与断言的 value 比较即可完成测试。可以说!!!#ffff00react-testing-library测试观:关注...
React官方推荐testing-library简介和入门 简介 从React官方网站看测试概览。提到了两个比较重要的工具,一个是Jest、一个是React测试库。 Jest是一个JavaScript测试运行器。它允许你使用jsdom操作DOM。尽管jsdom只是对浏览器工作表现的一个近似模拟,对测试React组件来说它通常也已经够用了。
// 假设我们有这样的 DOM// Hello Worldscreen.getByRole('blah') 上面会报这样的错误: TestingLibraryElementError:Unable to find an accessible elementwiththe role"blah"Here are the accessible roles:button:Name"Hello World":---HelloWorld 这里要注意的是,我们并没有为设置 Role 而加上role=button。因...
ByTitle:title 属性或元素 ByRole:ARIA role,可以定位到辅助树中的元素 Id getByTestId:函数需要在源代码中添加 data-testid 属性才能使用 一般而言,getByText 和 getByRole 应该是元素的首选定位类型。 import { render, screen } from'@testing-library/react'; ...
import{render,screen}from'@testing-library/react' 使用screen的好处是:在添加/删除 DOM Query 时,不需要实时地解构render的返回值来获取内容。输入screen,你的编辑器就能自动补全它里面的 API 了。 除非一种情况:你在配置container或者baseElement。不过,你应该避免使用它们(因为我实在想不出使用它们的现实场景,除非...
// 假设我们有这样的 DOM// Hello Worldscreen.getByRole('blah') 上面会报这样的错误: TestingLibraryElementError: Unable to find an accessible element with the role "blah"Here are the accessible roles:button:Name "Hello World":---HelloWorld 这里要注意的是,我们并没有为 设置 Role 而加上role=...
You will find no difficulty in following them to learn the powerful library. Related Projects Flux Demo Webpack Demos React Router Tutorial CSS Modules Demos React Testing Demo A boilerplate for React-Babel-Webpack project How to use First, copy the repo into your disk. $ git clone git@...