Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 27, 2022 06:25 pm GMT

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:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To