Link

getByRole('link', { name: 'About' });

<a href="/about">About</a>

Button

const saveButton = getByRole('button', { name: 'Save' });

<button>Save</button>

It is focused

expect(saveButton).toHaveFocus();

It changes text to ‘Saving’

expect(saveButton).toHaveTextContent('Saving');

<button>Saving</button>

When save is clicked

beforeEach(() => {
  userEvent.click(saveButton);
});

Checkbox

const rememberMe = getByRole('checkbox', { name: 'Remember me' });

<label>
  <input type="checkbox">
  Remember me
</label>

It is checked

expect(rememberMe).toBeChecked();

<label><input type="checkbox">Remember me</label>

Textbox

It has Bio text field

getByLabelText('Bio');

<label>
  Bio
  <input>
</label>

It has Bio text field

getByLabelText('Bio');

<label>
  Bio
  <textarea></textarea>
</label>

It is valid

expect(getByLabelText('Bio')).toBeValid();

<label>
  Bio
  <input aria-invalid="false">
</label>

It is invalid

expect(getByLabelText('Bio')).toBeInvalid();

<label>
  Bio
  <input aria-invalid="true">
</label>

When ‘Painter’ is typed

beforeEach(() => {
  userEvent.type(getByLabelText('Bio'), 'Painter');
});

Radio

It is checked

expect(getByRole('radio', { name: 'Blue' })).toBeChecked();

<label><input type="radio">Purple</label>
<label><input type="radio" checked>Blue</label>
<label><input type="radio">Orange</label>

Combobox

Coming soon

Tabs

Coming soon

Modal Dialog

Coming soon