import {type ARIARole} from 'aria-query' declare namespace matchers { interface TestingLibraryMatchers { /** * @deprecated * since v1.9.0 * @description * Assert whether a value is a DOM element, or not. Contrary to what its name implies, this matcher only checks * that you passed to it a valid DOM element. * * It does not have a clear definition of what "the DOM" is. Therefore, it does not check whether that element * is contained anywhere. * @see * [testing-library/jest-dom#toBeInTheDom](https://github.com/testing-library/jest-dom#toBeInTheDom) */ toBeInTheDOM(container?: HTMLElement | SVGElement): R /** * @description * Assert whether an element is present in the document or not. * @example * * * expect(queryByTestId('svg-element')).toBeInTheDocument() * expect(queryByTestId('does-not-exist')).not.toBeInTheDocument() * @see * [testing-library/jest-dom#tobeinthedocument](https://github.com/testing-library/jest-dom#tobeinthedocument) */ toBeInTheDocument(): R /** * @description * 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: * * 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 `
` it has the open attribute * @example *
* Zero Opacity *
* *
Visible Example
* * expect(getByTestId('zero-opacity')).not.toBeVisible() * expect(getByTestId('visible')).toBeVisible() * @see * [testing-library/jest-dom#tobevisible](https://github.com/testing-library/jest-dom#tobevisible) */ toBeVisible(): R /** * @deprecated * since v5.9.0 * @description * Assert whether an element has content or not. * @example * * * * * expect(getByTestId('empty')).toBeEmpty() * expect(getByTestId('not-empty')).not.toBeEmpty() * @see * [testing-library/jest-dom#tobeempty](https://github.com/testing-library/jest-dom#tobeempty) */ toBeEmpty(): R /** * @description * Assert whether an element has content or not. * @example * * * * * expect(getByTestId('empty')).toBeEmptyDOMElement() * expect(getByTestId('not-empty')).not.toBeEmptyDOMElement() * @see * [testing-library/jest-dom#tobeemptydomelement](https://github.com/testing-library/jest-dom#tobeemptydomelement) */ toBeEmptyDOMElement(): R /** * @description * Allows you to check whether an element is disabled from the user's perspective. * * Matches if the element is a form control and the `disabled` attribute is specified on this element or the * element is a descendant of a form element with a `disabled` attribute. * @example * * * expect(getByTestId('button')).toBeDisabled() * @see * [testing-library/jest-dom#tobedisabled](https://github.com/testing-library/jest-dom#tobedisabled) */ toBeDisabled(): R /** * @description * Allows you to check whether an element is not disabled from the user's perspective. * * Works like `not.toBeDisabled()`. * * Use this matcher to avoid double negation in your tests. * @example * * * expect(getByTestId('button')).toBeEnabled() * @see * [testing-library/jest-dom#tobeenabled](https://github.com/testing-library/jest-dom#tobeenabled) */ toBeEnabled(): R /** * @description * Check if a form element, or the entire `form`, is currently invalid. * * An `input`, `select`, `textarea`, or `form` 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. * @example * * *
* *
* * expect(getByTestId('no-aria-invalid')).not.toBeInvalid() * expect(getByTestId('invalid-form')).toBeInvalid() * @see * [testing-library/jest-dom#tobeinvalid](https://github.com/testing-library/jest-dom#tobeinvalid) */ toBeInvalid(): R /** * @description * 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. * @example * *
* * expect(getByTestId('required-input')).toBeRequired() * expect(getByTestId('supported-role')).not.toBeRequired() * @see * [testing-library/jest-dom#toberequired](https://github.com/testing-library/jest-dom#toberequired) */ toBeRequired(): R /** * @description * Allows you to check if a form element is currently required. * * An `input`, `select`, `textarea`, or `form` element is invalid if it has an `aria-invalid` attribute with no * value or a value of "false", or if the result of `checkValidity()` is true. * @example * * *
* *
* * expect(getByTestId('no-aria-invalid')).not.toBeValid() * expect(getByTestId('invalid-form')).toBeInvalid() * @see * [testing-library/jest-dom#tobevalid](https://github.com/testing-library/jest-dom#tobevalid) */ toBeValid(): R /** * @description * Allows you to assert whether an element contains another element as a descendant or not. * @example * * * * * const ancestor = getByTestId('ancestor') * const descendant = getByTestId('descendant') * const nonExistantElement = getByTestId('does-not-exist') * expect(ancestor).toContainElement(descendant) * expect(descendant).not.toContainElement(ancestor) * expect(ancestor).not.toContainElement(nonExistantElement) * @see * [testing-library/jest-dom#tocontainelement](https://github.com/testing-library/jest-dom#tocontainelement) */ toContainElement(element: HTMLElement | SVGElement | null): R /** * @description * Assert whether a string representing a HTML element is contained in another element. * @example * * * expect(getByTestId('parent')).toContainHTML('') * @see * [testing-library/jest-dom#tocontainhtml](https://github.com/testing-library/jest-dom#tocontainhtml) */ toContainHTML(htmlText: string): R /** * @description * Allows you to check if a given element has an attribute or not. * * You can also optionally check that the attribute has a specific expected value or partial match using * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring) or * [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp). * @example * * * expect(button).toHaveAttribute('disabled') * expect(button).toHaveAttribute('type', 'submit') * expect(button).not.toHaveAttribute('type', 'button') * @see * [testing-library/jest-dom#tohaveattribute](https://github.com/testing-library/jest-dom#tohaveattribute) */ toHaveAttribute(attr: string, value?: unknown): R /** * @description * 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. * @example * * *
no classes
* * const deleteButton = getByTestId('delete-button') * const noClasses = getByTestId('no-classes') * expect(deleteButton).toHaveClass('btn') * expect(deleteButton).toHaveClass('btn-danger xs') * expect(deleteButton).toHaveClass(/danger/, 'xs') * expect(deleteButton).toHaveClass('btn xs btn-danger', {exact: true}) * expect(deleteButton).not.toHaveClass('btn xs btn-danger', {exact: true}) * expect(noClasses).not.toHaveClass() * @see * [testing-library/jest-dom#tohaveclass](https://github.com/testing-library/jest-dom#tohaveclass) */ toHaveClass(...classNames: Array): R toHaveClass(classNames: string, options?: {exact: boolean}): R /** * @description * This allows you to check whether the given form element has the specified displayed value (the one the * end user will see). It accepts , * * * * * * * * const input = screen.getByLabelText('First name') * const textarea = screen.getByLabelText('Description') * const selectSingle = screen.getByLabelText('Fruit') * const selectMultiple = screen.getByLabelText('Fruits') * * expect(input).toHaveDisplayValue('Luca') * expect(textarea).toHaveDisplayValue('An example description here.') * expect(selectSingle).toHaveDisplayValue('Select a fruit...') * expect(selectMultiple).toHaveDisplayValue(['Banana', 'Avocado']) * * @see * [testing-library/jest-dom#tohavedisplayvalue](https://github.com/testing-library/jest-dom#tohavedisplayvalue) */ toHaveDisplayValue(value: string | RegExp | Array): R /** * @description * Assert whether an element has focus or not. * @example *
* *
* * const input = getByTestId('element-to-focus') * input.focus() * expect(input).toHaveFocus() * input.blur() * expect(input).not.toHaveFocus() * @see * [testing-library/jest-dom#tohavefocus](https://github.com/testing-library/jest-dom#tohavefocus) */ toHaveFocus(): R /** * @description * Check if a form or fieldset contains form controls for each given name, and having the specified value. * * Can only be invoked on a form or fieldset element. * @example *
* * * * *
* * expect(getByTestId('login-form')).toHaveFormValues({ * username: 'jane.doe', * rememberMe: true, * }) * @see * [testing-library/jest-dom#tohaveformvalues](https://github.com/testing-library/jest-dom#tohaveformvalues) */ toHaveFormValues(expectedValues: Record): R /** * @description * Check if an element has specific css properties with specific values applied. * * Only matches if the element has *all* the expected properties applied, not just some of them. * @example * * * const button = getByTestId('submit-button') * expect(button).toHaveStyle('background-color: green') * expect(button).toHaveStyle({ * 'background-color': 'green', * display: 'none' * }) * @see * [testing-library/jest-dom#tohavestyle](https://github.com/testing-library/jest-dom#tohavestyle) */ toHaveStyle(css: string | Record): R /** * @description * Check whether the given element has a text content or not. * * When a string argument is passed through, it will perform a partial case-sensitive match to the element * 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. * @example * Text Content * * const element = getByTestId('text-content') * expect(element).toHaveTextContent('Content') * // to match the whole content * expect(element).toHaveTextContent(/^Text Content$/) * // to use case-insentive match * expect(element).toHaveTextContent(/content$/i) * expect(element).not.toHaveTextContent('content') * @see * [testing-library/jest-dom#tohavetextcontent](https://github.com/testing-library/jest-dom#tohavetextcontent) */ toHaveTextContent( text: string | RegExp, options?: {normalizeWhitespace: boolean}, ): R /** * @description * Check whether the given form element has the specified value. * * Accepts ``, `