example `findByText`

// src/__tests__/example.test.js
// This is an example of how to use findByText to query for text that
// is not visible right away
import {
getByRole,
findByText,
getByPlaceholderText,
} from '@testing-library/dom'
import userEvent from '@testing-library/user-event'
// provides a set of custom jest matchers that you can use to extend jest
// i.e. `.toBeVisible`
import '@testing-library/jest-dom'
const renderContent = el => {
el.innerHTML = `
<form id='login_form' method='post' name='login'>
<label for='username'>User Name:</label>
<input
type='text'
name='username'
id='username_input'
placeholder='Enter user name'
/>
<span id='username_required_error' style='color: red; display: none;'>
User Name Required
</span>
<span id='invalid_username_error' style='color: red; display: none;'>
Invalid User Name
</span>
<label for='password'>Password:</label>
<input
type='password'
name='password'
id='password_input'
placeholder='Enter password'
/>
<span id='invalid_password_error' style='color: red; display: none;'>
Invalid Password
</span>
<span id='password_required_error' style='color: red; display: none;'>
Password Required
</span>
<button id='submit' type='submit'>
Login
</button>
</form>
`
const submitButton = el.querySelector('#submit')
const formEl = el.querySelector('#login_form')
submitButton.addEventListener('click', () => {
const userInput = el.querySelector('#username_input')
const passwordInput = el.querySelector('#password_input')
var userName = userInput.value
var password = passwordInput.value
if (!userName) {
el.querySelector('#username_required_error').style.display = 'inline'
}
if (!password) {
el.querySelector('#password_required_error').style.display = 'inline'
}
if (userName && userName !== 'Bob') {
el.querySelector('#invalid_username_error').style.display = 'inline'
}
if (password && password !== 'theBuilder') {
el.querySelector('#invalid_password_error').style.display = 'inline'
}
})
formEl.addEventListener('submit', function(evt) {
evt.preventDefault()
window.history.back()
})
return el
}
describe('findByText Examples', () => {
let div
let container
beforeEach(() => {
div = document.createElement('div')
container = renderContent(div)
})
it('should show a required field warning for each empty input field', async () => {
userEvent.click(
getByRole(container, 'button', {
name: 'Login',
})
)
expect(await findByText(container, 'User Name Required')).toBeVisible()
expect(await findByText(container, 'Password Required')).toBeVisible()
})
it('should show invalid field errors for each invalid input field', async () => {
const userNameField = getByPlaceholderText(container, 'Enter user name')
const passwordField = getByPlaceholderText(container, 'Enter password')
expect(await findByText(container, 'Invalid Password')).not.toBeVisible()
expect(await findByText(container, 'Invalid User Name')).not.toBeVisible()
userEvent.type(userNameField, 'Philchard')
userEvent.type(passwordField, 'theCat')
expect(userNameField).toHaveValue('Philchard')
expect(passwordField).toHaveValue('theCat')
userEvent.click(
getByRole(container, 'button', {
name: 'Login',
})
)
expect(await findByText(container, 'Invalid User Name')).toBeVisible()
expect(await findByText(container, 'Invalid Password')).toBeVisible()
})
})
Last updated on by Matan Borenkraout