How to use the @testing-library/react.queryByText function in @testing-library/react

it('orders pages for all accounts', async () => {
    AccountService.fetchPendingInviteAccounts = jest
      .fn()
      .mockResolvedValueOnce(MOCK_ACCOUNTS)

    const page = renderPage()
    await accountsTestUtils.waitForAccountsToLoad(page)
    const pagination = page.getByRole('navigation')

    const page1Button = rtl.queryByText(pagination, '1')
    expect(page1Button).not.toBeNull()

    const page16Button = rtl.queryByText(pagination, '16')
    expect(page16Button).not.toBeNull()
    rtl.fireEvent.click(page16Button)
    accountsTestUtils.expectEmailIn('150@example.com', page.baseElement)
  })

const modal = rtl.getByText(document, 'Confirm deletion').closest('.modal')
    const confirmDeleteButton = rtl.getByText(modal, 'Delete')
    rtl.getByText(modal, targetAccountEmail)
    rtl.fireEvent.click(confirmDeleteButton)

    await accountsTestUtils.waitForAccountsToLoad(page)
    expect(rtl.queryByText(document, 'Confirm deletion')).toBeNull()
    expect(AccountService.deleteAccountByUserId.mock.calls).toHaveLength(1)
    expect(AccountService.deleteAccountByUserId.mock.calls[0][0]).toEqual(
      targetAccountUserId,
    )

    await rtl.wait(() =>
      expect(page.getByText(/Deleted account/)).toBeInTheDocument(),
    )
    expect(rtl.queryByText(table, targetAccountEmail)).toBeNull()
  })

it('orders pages for all accounts', async () => {
    AccountService.fetchRegisteredAccounts = jest
      .fn()
      .mockResolvedValueOnce(MOCK_ACCOUNTS)

    const page = renderPage()
    await accountsTestUtils.waitForAccountsToLoad(page)
    const pagination = page.getByRole('navigation')

    const page1Button = rtl.queryByText(pagination, '1')
    expect(page1Button).not.toBeNull()

    const page16Button = rtl.queryByText(pagination, '16')
    expect(page16Button).not.toBeNull()
    rtl.fireEvent.click(page16Button)
    expect(
      page.queryByText(`${NUM_MOCK_ACCOUNTS - 1}@example.com`),
    ).not.toBeNull()
  })

it('orders pages for all accounts', async () => {
    AccountService.fetchPendingRequestAccounts = jest
      .fn()
      .mockResolvedValueOnce(MOCK_ACCOUNTS)

    const page = renderPage()
    await accountsTestUtils.waitForAccountsToLoad(page)
    const pagination = page.getByRole('navigation')

    const page1Button = rtl.queryByText(pagination, '1')
    expect(page1Button).not.toBeNull()

    const page16Button = rtl.queryByText(pagination, '16')
    expect(page16Button).not.toBeNull()
    rtl.fireEvent.click(page16Button)
    accountsTestUtils.expectEmailIn('150@example.com', page.baseElement)
  })

it('orders pages for all accounts', async () => {
    AccountService.fetchRegisteredAccounts = jest
      .fn()
      .mockResolvedValueOnce(MOCK_ACCOUNTS)

    const page = renderPage()
    await accountsTestUtils.waitForAccountsToLoad(page)
    const pagination = page.getByRole('navigation')

    const page1Button = rtl.queryByText(pagination, '1')
    expect(page1Button).not.toBeNull()

    const page16Button = rtl.queryByText(pagination, '16')
    expect(page16Button).not.toBeNull()
    rtl.fireEvent.click(page16Button)
    expect(
      page.queryByText(`${NUM_MOCK_ACCOUNTS - 1}@example.com`),
    ).not.toBeNull()
  })

const table = page.getByTestId('accountsTable')
    const targetAccountEmailCell = rtl.getByText(table, targetAccountEmail)
    const deleteButton = page.getByText('Delete')

    expect(deleteButton.disabled === true)
    rtl.fireEvent.click(targetAccountEmailCell)
    expect(deleteButton.disabled === false)
    rtl.fireEvent.click(deleteButton)

    const modal = rtl.getByText(document, 'Confirm deletion').closest('.modal')
    const confirmDeleteButton = rtl.getByText(modal, 'Delete')
    rtl.getByText(modal, targetAccountEmail)
    rtl.fireEvent.click(confirmDeleteButton)

    await accountsTestUtils.waitForAccountsToLoad(page)
    expect(rtl.queryByText(document, 'Confirm deletion')).toBeNull()
    expect(AccountService.deleteAccountByUserId.mock.calls).toHaveLength(1)
    expect(AccountService.deleteAccountByUserId.mock.calls[0][0]).toEqual(
      targetAccountUserId,
    )

    await rtl.wait(() =>
      expect(page.getByText(/Deleted account/)).toBeInTheDocument(),
    )
    expect(rtl.queryByText(table, targetAccountEmail)).toBeNull()
  })

it('orders pages for all accounts', async () => {
    AccountService.fetchPendingInviteAccounts = jest
      .fn()
      .mockResolvedValueOnce(MOCK_ACCOUNTS)

    const page = renderPage()
    await accountsTestUtils.waitForAccountsToLoad(page)
    const pagination = page.getByRole('navigation')

    const page1Button = rtl.queryByText(pagination, '1')
    expect(page1Button).not.toBeNull()

    const page16Button = rtl.queryByText(pagination, '16')
    expect(page16Button).not.toBeNull()
    rtl.fireEvent.click(page16Button)
    accountsTestUtils.expectEmailIn('150@example.com', page.baseElement)
  })

it('orders pages for all accounts', async () => {
    AccountService.fetchAdminAccounts = jest
      .fn()
      .mockResolvedValueOnce(MOCK_ADMINS)

    const page = renderPage()
    await accountsTestUtils.waitForAccountsToLoad(page)
    const pagination = page.getByRole('navigation')

    const page1Button = rtl.queryByText(pagination, '1')
    expect(page1Button).not.toBeNull()

    const page2Button = rtl.queryByText(pagination, '2')
    expect(page2Button).not.toBeNull()
    rtl.fireEvent.click(page2Button)
    accountsTestUtils.expectEmailIn('150@example.com', page.baseElement)
  })

it('orders pages for all accounts', async () => {
    AccountService.fetchAdminAccounts = jest
      .fn()
      .mockResolvedValueOnce(MOCK_ADMINS)

    const page = renderPage()
    await accountsTestUtils.waitForAccountsToLoad(page)
    const pagination = page.getByRole('navigation')

    const page1Button = rtl.queryByText(pagination, '1')
    expect(page1Button).not.toBeNull()

    const page2Button = rtl.queryByText(pagination, '2')
    expect(page2Button).not.toBeNull()
    rtl.fireEvent.click(page2Button)
    accountsTestUtils.expectEmailIn('150@example.com', page.baseElement)
  })

const page = renderPage()
    await accountsTestUtils.waitForAccountsToLoad(page)

    const startCreateButton = page.getByText(/Create invite/)
    rtl.fireEvent.click(startCreateButton)
    const createModal = await rtl.waitForElement(() =>
      rtl.getByText(document, 'Create invite').closest('.modal'),
    )

    const emailInput = rtl.getByPlaceholderText(createModal, 'Email address')
    const confirmCreateButton = rtl
      .getAllByRole(createModal, 'button')
      .filter(el => el.textContent === 'Create')[0]
    expect(confirmCreateButton).toBeInTheDocument()

    const pleaseEnterAValidEmail = rtl.queryByText(
      createModal,
      'Please enter a valid email address.',
    )
    const pleaseEnterAValidEmailIsVisible = () =>
      !pleaseEnterAValidEmail.classList.contains('hidden')

    expect(confirmCreateButton.disabled).toBe(true)
    expect(pleaseEnterAValidEmailIsVisible()).toBe(true)

    rtl.fireEvent.change(emailInput, { target: { value: '000' } })
    expect(confirmCreateButton.disabled).toBe(true)
    expect(pleaseEnterAValidEmailIsVisible()).toBe(true)

    rtl.fireEvent.change(emailInput, { target: { value: '000@' } })
    expect(confirmCreateButton.disabled).toBe(true)
    expect(pleaseEnterAValidEmailIsVisible()).toBe(true)