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 ``, ` *

prev

*

text selected text

*

next

*
* * getByTestId('text').setSelectionRange(5, 13) * expect(getByTestId('text')).toHaveSelection('selected') * * getByTestId('textarea').setSelectionRange(0, 5) * expect('textarea').toHaveSelection('text ') * * const selection = document.getSelection() * const range = document.createRange() * selection.removeAllRanges() * selection.empty() * selection.addRange(range) * * // selection of child applies to the parent as well * range.selectNodeContents(getByTestId('child')) * expect(getByTestId('child')).toHaveSelection('selected') * expect(getByTestId('parent')).toHaveSelection('selected') * * // selection that applies from prev all, parent text before child, and part child. * range.setStart(getByTestId('prev'), 0) * range.setEnd(getByTestId('child').childNodes[0], 3) * expect(queryByTestId('prev')).toHaveSelection('prev') * expect(queryByTestId('child')).toHaveSelection('sel') * expect(queryByTestId('parent')).toHaveSelection('text sel') * expect(queryByTestId('next')).not.toHaveSelection() * * // selection that applies from part child, parent text after child and part next. * range.setStart(getByTestId('child').childNodes[0], 3) * range.setEnd(getByTestId('next').childNodes[0], 2) * expect(queryByTestId('child')).toHaveSelection('ected') * expect(queryByTestId('parent')).toHaveSelection('ected text') * expect(queryByTestId('prev')).not.toHaveSelection() * expect(queryByTestId('next')).toHaveSelection('ne') * * @see * [testing-library/jest-dom#tohaveselection](https://github.com/testing-library/jest-dom#tohaveselection) */ toHaveSelection(selection?: string): R /* * @description * This allows to check whether given element has been [pressed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) * * It accepts elements with explicit or implicit `button` role and valid `aria-pressed` * attribute of `"true"` or `"false"`. * * @example * * * * * * * Pressed span * Released span * * screen.getByRole('button', { name: 'Pressed' }).toBePressed(); * screen.getByRole('button', { name: 'Released' }).not.toBePressed(); * * screen.getByRole('button', { name: 'Pressed input button' }).toBePressed(); * screen.getByRole('button', { name: 'Released input button' }).not.toBePressed(); * * screen.getByRole('button', { name: 'Pressed span' }).toBePressed(); * screen.getByRole('button', { name: 'Released span' }).not.toBePressed(); * * @see * [testing-library/jest-dom#tobepressed](https://github.com/testing-library/jest-dom#tobepressed) */ toBePressed(): R /* * @description * This allows to check whether given element has been [partially pressed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) * * It accepts elements with explicit or implicit `button` role and valid `aria-pressed` of `"mixed"`. * * @example * * * Partially pressed span * * screen.getByRole('button', { name: 'Partially Pressed' }).toBePartiallyPressed(); * screen.getByRole('button', { name: 'Partially pressed input button' }).toBePartiallyPressed(); * screen.getByRole('button', { name: 'Partially pressed span' }).toBePartiallyPressed(); * * @See * [testing-library/jest-dom#tobepartiallypressed](https://github.com/testing-library/jest-dom#tobepartiallypressed) */ toBePartiallyPressed(): R /* * @description * This checks if a given element appears before another element in the DOM tree, as per [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition). * * @example *
* Text A * Text B *
* * const textA = queryByTestId('text-a') * const textB = queryByTestId('text-b') * * expect(textA).toAppearBefore(textB) * expect(textB).not.toAppearBefore(textA) * * @See * [testing-library/jest-dom#toappearbefore](https://github.com/testing-library/jest-dom#toappearbefore) */ toAppearBefore(element: HTMLElement | SVGElement): R /* * @description * This checks if a given element appears after another element in the DOM tree, as per [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition). * * @example *
* Text A * Text B *
* * const textA = queryByTestId('text-a') * const textB = queryByTestId('text-b') * * expect(textB).toAppearAfter(textA) * expect(textA).not.toAppearAfter(textB) * * @See * [testing-library/jest-dom#toappearafter](https://github.com/testing-library/jest-dom#toappearafter) */ toAppearAfter(element: HTMLElement | SVGElement): R } } // Needs to extend Record to be accepted by expect.extend() // as it requires a string index signature. declare const matchers: matchers.TestingLibraryMatchers & Record export = matchers