Native Test

toBeDisabled
Docs

This allows you to check whether an element is disabled from the user's perspective. According to the specification, the following elements can be disabled: button, input, select, textarea, optgroup, option, fieldset, and custom elements. This custom matcher considers an element as disabled if the element is among the types of elements that can be disabled (listed above), and the disabled attribute is present. It will also consider the element as disabled if it's inside a parent form element that supports being disabled and has the disabled attribute present.

link
toBeEmptyDOMElement
Docs

This allows you to assert whether an element has no visible content for the user. It ignores comments but will fail if the element contains white-space.

toBeInTheDocument
Docs

This allows you to assert whether an element is present in the document or not.

Html Element
toBeRequired
Docs

This allows you to check if a form element is currently required. An element is required if it is having a required or aria-required="true" attribute.

toBeValid
Docs

This allows you to check if the value of an element, is currently valid. An element is valid if it has no aria-invalid attributes or an attribute value of "false". The result of checkValidity() must also be true if it's a form element.

toBeInvalid
Docs

This allows you to check if an element, is currently invalid. An element is invalid if it has an aria-invalid attribute with no value or a value of true, or if the result of checkValidity() is false. Examples

toBeVisible
Docs

This allows you to check if an element is currently visible to the user. An element is visible if all the following conditions are met:

  1. it is present in the document
  2. it does not have its css property display set to none
  3. it does not have its css property visibility set to either hidden or collapse
  4. it does not have its css property opacity set to 0
  5. its parent element is also visible (and so on up to the top of the DOM tree)
  6. it does not have the hidden attribute
  7. if details it has the open attribute
Zero Opacity Example
Visibility Hidden Example
Display None Example
Hidden Parent Example
Visible Example
Title of hidden textHidden Details Example
Title of visible text
Visible Details Example
toBeChecked
Docs

This allows you to check whether the given element is checked. It accepts an input of type checkbox or radio and elements with a role of checkbox, radio or switch with a valid aria-checked attribute of "true" or "false".

toContainElement
Docs

This allows you to assert whether an element contains another element as a descendant or not.

toHaveAccessibleDescription
Docs

This allows you to assert that an element has the expected accessible description.

Link to StartLink to AboutUser profile picCompany logoThe logo of Our Company
toHaveAccessibleName
Docs

This allows you to assert that an element has the expected accessible name. It is useful, for instance, to assert that form elements and buttons are properly labelled.

Test altTest title

Test content

toHaveAttribute
Docs

This allows you to check whether the given element has an attribute or not.

toHaveClass
Docs

This allows you to check whether the given element has certain classes within its class attribute. You must provide at least one class, unless you are asserting that an element does not have any classes.

toHaveFocus
Docs

This allows you to assert whether an element has focus or not.

toHaveFormValues
Docs

This allows you to check if a form or fieldset contains form controls for each given name, and having the specified value.

toHaveTextContent
Docs

This allows you to check whether the given node has a text content or not. This supports elements, but also text nodes and fragments. When a string argument is passed through, it will perform a partial case-sensitive match to the node content. To perform a case-insensitive match, you can use a RegExp with the /i modifier. If you want to match the whole content, you can use a RegExp to do it.

Text Content
toHaveValue
Docs

This allows you to check whether the given form element has the specified value. It accepts <input>, <select> and <textarea> elements with the exception of <input type="checkbox"> and <input type="radio">, which can be meaningfully matched only using toBeChecked or toHaveFormValues. For all other form elements, the value is matched using the same algorithm as in toHaveFormValues does.

toHaveDisplayValue
Docs

This allows you to check whether the given form element has the specified displayed value (the one the end user will see). It accepts <input>, <select> and <textarea> elements with the exception of <input type="checkbox"> and <input type="radio">, which can be meaningfully matched only using toBeChecked or toHaveFormValues.