An Interest In:
Web News this Week
- March 24, 2024
- March 23, 2024
- March 22, 2024
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
February 27, 2022 06:25 pm GMT
Original Link: https://dev.to/kaede_io/react-testing-library-de-getbytext-getbyrole-getallbyrole-wobi-jiao-suru-2o26
React testing-library getByText, getByRole, getAllByRole
import React from 'react';import './App.css';function App() { return ( <div> <button>TEST_BUTTON</button> </div> );}export default App;
screen.getByText
https://testing-library.com/docs/queries/about/#textmatch-examples
test('renders App Text', () => { render(<App />); const appTextElement = screen.getByText('TEST_BUTTON'); expect(appTextElement).toBeInTheDocument(); });
PASS src/App.test.tsx App renders App Text (36 ms)Test Suites: 1 passed, 1 totalTests: 1 passed, 1 totalSnapshots: 0 totalTime: 1.845 s, estimated 2 s
<div> <button>TEST_BUTTON</button> <p>TEST_BUTTON is over there</p> </div>
describe('App', () => { test('renders App Text', () => { render(<App />); const appTextElement = screen.getByText('TEST_BUTTON'); expect(appTextElement).toBeInTheDocument(); screen.debug(appTextElement) });})
debug
renders App Text' console.log <button> TEST_BUTTON </button> /Users/kaede/testing/src/App.test.tsx:14:12 12 | const appTextElement = screen.getByText('TEST_BUTTON'); 13 | expect(appTextElement).toBeInTheDocument(); > 14 | screen.debug(appTextElement)
button
getByRole
const appTextElement = screen.getByRole('button');
WAI_ARIA HTML role
<div> <button>TEST_BUTTON</button> <button>SUB_BUTTON</button> <p>TEST_BUTTON is over there</p> </div>
button button
TestingLibraryElementError: Found multiple elements with the role "button"
getByText
name
screen.getByRole('button', {name: 'TEST_BUTTON'});
name
getByRole hidden presentation
https://testing-library.com/docs/queries/byrole#options
<div> <button role="presentation">presentation button</button> <button>SUB_BUTTON</button> <p>TEST_BUTTON is over there</p> </div>
hidden presentation
SUB_BUTTON getByRole('button')
getByRole role
https://testing-library.com/docs/queries/byrole#options
aria-hidden
aria-selected
aria-checked
aria-current
aria-pressed
aria-expanded
getAllByRole map
<div> <button role="presentation">presentation button</button> <button>SUB_BUTTON</button> <div role="button">TEST_BUTTON is over there</div> </div>
const appTextElement = screen.getAllByRole('button');
getAllByRole
toBeInTheDocument
test('renders App Text', () => { render(<App />); const appTextElement = screen.getAllByRole('button'); appTextElement.map( element => { screen.debug(element) expect(element).toBeInTheDocument(); } ) });
document
console.log <button> presentation button </button> console.log <button> SUB_BUTTON </button> console.log <div role="button" > TEST_BUTTON is over there </div> PASS src/App.test.tsx App renders App Text (55 ms)Test Suites: 1 passed, 1 totalTests: 1 passed, 1 totalSnapshots: 0 totalTime: 1.61 s, estimated 2 s
getByText
getByRole
name aria-checked
getAllByRole map document
Original Link: https://dev.to/kaede_io/react-testing-library-de-getbytext-getbyrole-getallbyrole-wobi-jiao-suru-2o26
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To