Native Test
toBeDisabled
DocsThis 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.
linktoBeEmptyDOMElement
DocsThis 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
DocsThis allows you to assert whether an element is present in the document or not.
Html ElementtoBeRequired
DocsThis 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
DocsThis 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
DocsThis 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
DocsThis allows you to check if an element is currently visible to the user. An element is visible if all the following conditions are met:
- it is present in the document
- it does not have its css property display set to none
- it does not have its css property visibility set to either hidden or collapse
- it does not have its css property opacity set to 0
- its parent element is also visible (and so on up to the top of the DOM tree)
- it does not have the hidden attribute
- if details it has the open attribute
Title of hidden text
Hidden Details ExampleTitle of visible text
toBeChecked
DocsThis 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
DocsThis allows you to assert whether an element contains another element as a descendant or not.
toHaveAccessibleDescription
DocsThis allows you to assert that an element has the expected accessible description.
Link to StartLink to AbouttoHaveAccessibleName
DocsThis 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 content
toHaveAttribute
DocsThis allows you to check whether the given element has an attribute or not.
toHaveClass
DocsThis 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
DocsThis allows you to assert whether an element has focus or not.
toHaveFormValues
DocsThis allows you to check if a form or fieldset contains form controls for each given name, and having the specified value.
toHaveTextContent
DocsThis 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 ContenttoHaveValue
DocsThis 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
DocsThis 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.