How to use the @testing-library/react.getByLabelText function in @testing-library/react
To help you get started, we’ve selected a few @testing-library/react examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
awslabs / aws-api-gateway-developer-portal / dev-portal / src / pages / Admin / Accounts / __tests__ / AdminAccounts.jsx View on Github 
const pagination = page.getByRole('navigation')
const lastPageButton = rtl.getByLabelText(pagination, 'Last item')
rtl.fireEvent.click(lastPageButton)
_(MOCK_ADMINS)
.orderBy(['EmailAddress'])
.drop(
Math.floor(MOCK_ADMINS.length / AccountsTable.DEFAULT_PAGE_SIZE) *
AccountsTable.DEFAULT_PAGE_SIZE,
)
.forEach(({ EmailAddress }) =>
accountsTestUtils.expectEmailIn(EmailAddress, table),
)
// Order descending, go back to first page
rtl.fireEvent.click(emailAddressHeader)
const firstPageButton = rtl.getByLabelText(pagination, 'First item')
rtl.fireEvent.click(firstPageButton)
// Check that first page is correct
_(MOCK_ADMINS)
.orderBy(['EmailAddress'], ['desc'])
.take(AccountsTable.DEFAULT_PAGE_SIZE)
.forEach(({ EmailAddress }) =>
accountsTestUtils.expectEmailIn(EmailAddress, table),
)
})// Check that last page is correct
const pagination = page.getByRole('navigation')
const lastPageButton = rtl.getByLabelText(pagination, 'Last item')
rtl.fireEvent.click(lastPageButton)
_(MOCK_ACCOUNTS)
.orderBy(['EmailAddress'], ['asc'])
.drop(
Math.floor(NUM_MOCK_ACCOUNTS / AccountsTable.DEFAULT_PAGE_SIZE) *
AccountsTable.DEFAULT_PAGE_SIZE,
)
.forEach(({ EmailAddress }) => rtl.getByText(table, EmailAddress))
// Order descending, go back to first page
rtl.fireEvent.click(emailAddressHeader)
const firstPageButton = rtl.getByLabelText(pagination, 'First item')
rtl.fireEvent.click(firstPageButton)
// Check that first page is correct
_(MOCK_ACCOUNTS)
.orderBy(['EmailAddress'], ['desc'])
.take(AccountsTable.DEFAULT_PAGE_SIZE)
.forEach(({ EmailAddress }) => rtl.getByText(table, EmailAddress))
})await accountsTestUtils.waitForAccountsToLoad(page)
// Order ascending
const table = page.getByTestId('accountsTable')
const emailAddressHeader = rtl.getByText(table, 'Email address')
rtl.fireEvent.click(emailAddressHeader)
// Check that first page is correct
_(MOCK_ACCOUNTS)
.orderBy(['EmailAddress'], ['asc'])
.take(AccountsTable.DEFAULT_PAGE_SIZE)
.forEach(({ EmailAddress }) => rtl.getByText(table, EmailAddress))
// Check that last page is correct
const pagination = page.getByRole('navigation')
const lastPageButton = rtl.getByLabelText(pagination, 'Last item')
rtl.fireEvent.click(lastPageButton)
_(MOCK_ACCOUNTS)
.orderBy(['EmailAddress'], ['asc'])
.drop(
Math.floor(NUM_MOCK_ACCOUNTS / AccountsTable.DEFAULT_PAGE_SIZE) *
AccountsTable.DEFAULT_PAGE_SIZE,
)
.forEach(({ EmailAddress }) => rtl.getByText(table, EmailAddress))
// Order descending, go back to first page
rtl.fireEvent.click(emailAddressHeader)
const firstPageButton = rtl.getByLabelText(pagination, 'First item')
rtl.fireEvent.click(firstPageButton)
// Check that first page is correct
_(MOCK_ACCOUNTS)const pagination = page.getByRole('navigation')
const lastPageButton = rtl.getByLabelText(pagination, 'Last item')
rtl.fireEvent.click(lastPageButton)
_(MOCK_ACCOUNTS)
.orderBy(['EmailAddress'])
.drop(
Math.floor(MOCK_ACCOUNTS.length / AccountsTable.DEFAULT_PAGE_SIZE) *
AccountsTable.DEFAULT_PAGE_SIZE,
)
.forEach(({ EmailAddress }) =>
accountsTestUtils.expectEmailIn(EmailAddress, table),
)
// Order descending, go back to first page
rtl.fireEvent.click(emailAddressHeader)
const firstPageButton = rtl.getByLabelText(pagination, 'First item')
rtl.fireEvent.click(firstPageButton)
// Check that first page is correct
_(MOCK_ACCOUNTS)
.orderBy(['EmailAddress'], ['desc'])
.take(AccountsTable.DEFAULT_PAGE_SIZE)
.forEach(({ EmailAddress }) =>
accountsTestUtils.expectEmailIn(EmailAddress, table),
)
})const pagination = page.getByRole('navigation')
const lastPageButton = rtl.getByLabelText(pagination, 'Last item')
rtl.fireEvent.click(lastPageButton)
_(MOCK_ACCOUNTS)
.orderBy(['EmailAddress'])
.drop(
Math.floor(MOCK_ACCOUNTS.length / AccountsTable.DEFAULT_PAGE_SIZE) *
AccountsTable.DEFAULT_PAGE_SIZE,
)
.forEach(({ EmailAddress }) =>
accountsTestUtils.expectEmailIn(EmailAddress, table),
)
// Order descending, go back to first page
rtl.fireEvent.click(emailAddressHeader)
const firstPageButton = rtl.getByLabelText(pagination, 'First item')
rtl.fireEvent.click(firstPageButton)
// Check that first page is correct
_(MOCK_ACCOUNTS)
.orderBy(['EmailAddress'], ['desc'])
.take(AccountsTable.DEFAULT_PAGE_SIZE)
.forEach(({ EmailAddress }) =>
accountsTestUtils.expectEmailIn(EmailAddress, table),
)
})// Order ascending
const table = page.getByTestId(AccountsTable.ACCOUNTS_TABLE_TESTID)
const emailAddressHeader = rtl.getByText(table, 'Email address')
rtl.fireEvent.click(emailAddressHeader)
// Check that first page is correct
_(MOCK_ADMINS)
.orderBy(['EmailAddress'])
.take(AccountsTable.DEFAULT_PAGE_SIZE)
.forEach(({ EmailAddress }) =>
accountsTestUtils.expectEmailIn(EmailAddress, table),
)
// Check that last page is correct
const pagination = page.getByRole('navigation')
const lastPageButton = rtl.getByLabelText(pagination, 'Last item')
rtl.fireEvent.click(lastPageButton)
_(MOCK_ADMINS)
.orderBy(['EmailAddress'])
.drop(
Math.floor(MOCK_ADMINS.length / AccountsTable.DEFAULT_PAGE_SIZE) *
AccountsTable.DEFAULT_PAGE_SIZE,
)
.forEach(({ EmailAddress }) =>
accountsTestUtils.expectEmailIn(EmailAddress, table),
)
// Order descending, go back to first page
rtl.fireEvent.click(emailAddressHeader)
const firstPageButton = rtl.getByLabelText(pagination, 'First item')
rtl.fireEvent.click(firstPageButton)// Order ascending
const table = page.getByTestId(AccountsTable.ACCOUNTS_TABLE_TESTID)
const emailAddressHeader = rtl.getByText(table, 'Email address')
rtl.fireEvent.click(emailAddressHeader)
// Check that first page is correct
_(MOCK_ACCOUNTS)
.orderBy(['EmailAddress'])
.take(AccountsTable.DEFAULT_PAGE_SIZE)
.forEach(({ EmailAddress }) =>
accountsTestUtils.expectEmailIn(EmailAddress, table),
)
// Check that last page is correct
const pagination = page.getByRole('navigation')
const lastPageButton = rtl.getByLabelText(pagination, 'Last item')
rtl.fireEvent.click(lastPageButton)
_(MOCK_ACCOUNTS)
.orderBy(['EmailAddress'])
.drop(
Math.floor(MOCK_ACCOUNTS.length / AccountsTable.DEFAULT_PAGE_SIZE) *
AccountsTable.DEFAULT_PAGE_SIZE,
)
.forEach(({ EmailAddress }) =>
accountsTestUtils.expectEmailIn(EmailAddress, table),
)
// Order descending, go back to first page
rtl.fireEvent.click(emailAddressHeader)
const firstPageButton = rtl.getByLabelText(pagination, 'First item')
rtl.fireEvent.click(firstPageButton)// Order ascending
const table = page.getByTestId(AccountsTable.ACCOUNTS_TABLE_TESTID)
const emailAddressHeader = rtl.getByText(table, 'Email address')
rtl.fireEvent.click(emailAddressHeader)
// Check that first page is correct
_(MOCK_ACCOUNTS)
.orderBy(['EmailAddress'])
.take(AccountsTable.DEFAULT_PAGE_SIZE)
.forEach(({ EmailAddress }) =>
accountsTestUtils.expectEmailIn(EmailAddress, table),
)
// Check that last page is correct
const pagination = page.getByRole('navigation')
const lastPageButton = rtl.getByLabelText(pagination, 'Last item')
rtl.fireEvent.click(lastPageButton)
_(MOCK_ACCOUNTS)
.orderBy(['EmailAddress'])
.drop(
Math.floor(MOCK_ACCOUNTS.length / AccountsTable.DEFAULT_PAGE_SIZE) *
AccountsTable.DEFAULT_PAGE_SIZE,
)
.forEach(({ EmailAddress }) =>
accountsTestUtils.expectEmailIn(EmailAddress, table),
)
// Order descending, go back to first page
rtl.fireEvent.click(emailAddressHeader)
const firstPageButton = rtl.getByLabelText(pagination, 'First item')
rtl.fireEvent.click(firstPageButton)function updateTextInput(
container: HTMLElement,
labelText: string,
value: string
) {
const headerImageInput = getByLabelText(
container,
labelText
) as HTMLInputElement;
fireEvent.change(headerImageInput, { target: { value } });
return headerImageInput;
}@testing-library/react
Simple and complete React DOM testing utilities that encourage good testing practices.
Package Health Score
100 / 100Popular @testing-library/react functions
- @testing-library/react.act
- @testing-library/react.createEvent.keyDown
- @testing-library/react.fireEvent
- @testing-library/react.fireEvent.blur
- @testing-library/react.fireEvent.change
- @testing-library/react.fireEvent.click
- @testing-library/react.fireEvent.drop
- @testing-library/react.fireEvent.focus
- @testing-library/react.fireEvent.keyDown
- @testing-library/react.fireEvent.mouseDown
- @testing-library/react.fireEvent.mouseMove
- @testing-library/react.fireEvent.mouseUp
- @testing-library/react.getByLabelText
- @testing-library/react.getByRole
- @testing-library/react.getByText
- @testing-library/react.queryByText
- @testing-library/react.render
- @testing-library/react.screen.findByText
- @testing-library/react.screen.getByText
- @testing-library/react.within