React Testing Librbary & Jest part 4 Query Functions suffixes
===


---

###### tags: `React Testing Library`, `Jest`, `React`

## Query Criteria

Querying for elements with different criteria.

| End of Function Name | Search Criteria |
| ---------------------| --------------------------------------------------------------------|
| ByRole | Find elements based on their implicit or explicit ARIA role |
| ByLabelText | Find form elements based upon the text their paired labels contain. |
| ByPlaceholderText | Find elements based upon their placeholder text |
| ByText | Find elements based upon the text they contain |
| ByDisplayValue | Find elements based upon their current value |
| ByAltText | Find elements based upon their `alt` attribute |
| ByTitle | Find elements based upon their `title` attribute |
| ByTestId | Find elements based upon their `data-testid` arrtibute |

> **Note:**
> Use query functions ending with `ByRole` first, if `ByRole` is not an option then use others.

## Let's Test!

Here we have a simple form, it contains several elements that we can test.

// DataForm.jsx
import { useState } from 'react';

const DataForm = () => {
	const [email, setEmail] = useState('[e-mail]');

	return (
		<form>
			<h3>Enter Data</h3>
			<div data-testid="img wrapper">
				<img src="data.jpg" alt="data" />
			</div>
			<label htmlFor="email">Email</label>
			<input
				id="email"
				value={email}
				onChange={(e) => setEmail(e.target.value)}
			/>

			<label htmlFor="color">Color</label>
			<input id="color" placeholder="Red" />

			<button title="click when ready to submit">Submit</button>
		</form>
	);
};

export default DataForm;

Now, let's try to write test.

// DataForm.test.js

import { render, screen } from '@testing-library/react';
import DataForm from '../components/DataForm';

test('selecting different elements', () => {
	render(<DataForm />);

	// Grab elements and store in an array
	const elements = [
		screen.getByRole('button'),
		screen.getByLabelText({ name: /email/i }),
		screen.getByPlaceholderText('Red'),
		screen.getByText({ name: /color/i }),
		screen.getByDisplayValue('email'),
		screen.getByAltText('data'),
		screen.getByTitle('click when ready to submit'),
		screen.getByTestId('img wrapper'),
	];
	// Loop element array with an assertion as we expect these elements in the document
	for (let element of elements) {
		expect(element).toBeInTheDocument();
	}
});

Test result was failed due to I was giving wrong info, let's fix one by one.

// wrong 
screen.getByLabelText({ name: /email/i })
// Correct
screen.getByLabelText('Email')

// wrong, this was meant to grab value inside of `<input/>`
screen.getByDisplayValue('email'),
// Correct
screen.getByDisplayValue('[e-mail]')

// wrong, this was meant to grab texts inside of `<h3>` tag.
screen.getByText({ name: /color/i }),
// Correct
screen.getByText('Enter Data')

Here is the correct version.

// DataFrom.test.com

import { render, screen } from '@testing-library/react';
import DataForm from '../components/DataForm';

test('selecting different elements', () => {
	render(<DataForm />);

	// Grab elements and store in an array
	const elements = [
		screen.getByRole('button'),
		screen.getByLabelText('Email'),
		screen.getByPlaceholderText('Red'),
		screen.getByText('Enter Data'),
		screen.getByDisplayValue('[e-mail]'),
		screen.getByAltText('data'),
		screen.getByTitle('click when ready to submit'),
		screen.getByTestId('img wrapper'),
	];
      // Loop element array with an assertion as we expect these 
      // elements in the document
	for (let element of elements) {
		expect(element).toBeInTheDocument();
	}
});

## Regular expression

We can use regular expression to avoid case sensetive and we can provide partial sentence.

// DataForm.test.js

import { render, screen } from '@testing-library/react';
import DataForm from '../components/DataForm';

test('selecting different elements', () => {
	render(<DataForm />);

	// Grab elements and store in an array
	const elements = [
		screen.getByRole('button'),
		screen.getByLabelText(/email/i),
		screen.getByPlaceholderText(/red/i),
		screen.getByText(/enter Data/i),
		screen.getByDisplayValue(/[e-mail]/i),
		screen.getByAltText(/data/i),
        // Can use screen.getByTitle(/readt to sumit/i)
		screen.getByTitle(/click when ready to submit/i),
		screen.getByTestId(/img wrapper),
	];
	// Loop element array with an assertion as we expect these elements in the document
	for (let element of elements) {
		expect(element).toBeInTheDocument();
	}
});