\n\n### `toBeEnabled`\n\n```typescript\ntoBeEnabled()\n```\n\nThis allows you to check whether an element is not disabled from the user's\nperspective.\n\nIt works like `not.toBeDisabled()`. Use this matcher to avoid double negation in\nyour tests.\n\n> This custom matcher does not take into account the presence or absence of the\n> `aria-disabled` attribute. For more on why this is the case, check\n> [#144](https://github.com/testing-library/jest-dom/issues/144).\n\n
\n\n### `toBeEmptyDOMElement`\n\n```typescript\ntoBeEmptyDOMElement()\n```\n\nThis allows you to assert whether an element has no visible content for the\nuser. It ignores comments but will fail if the element contains white-space.\n\n#### Examples\n\n```html\n\n \n\n```\n\n```javascript\nexpect(getByTestId('empty')).toBeEmptyDOMElement()\nexpect(getByTestId('not-empty')).not.toBeEmptyDOMElement()\nexpect(getByTestId('with-whitespace')).not.toBeEmptyDOMElement()\n```\n\n
\n\n### `toBeInTheDocument`\n\n```typescript\ntoBeInTheDocument()\n```\n\nThis allows you to assert whether an element is present in the document or not.\n\n#### Examples\n\n```html\nHtml Element\n\n```\n\n```javascript\nexpect(\n getByTestId(document.documentElement, 'html-element'),\n).toBeInTheDocument()\nexpect(getByTestId(document.documentElement, 'svg-element')).toBeInTheDocument()\nexpect(\n queryByTestId(document.documentElement, 'does-not-exist'),\n).not.toBeInTheDocument()\n```\n\n> Note: This matcher does not find detached elements. The element must be added\n> to the document to be found by toBeInTheDocument. If you desire to search in a\n> detached element please use: [`toContainElement`](#tocontainelement)\n\n
\n\n### `toBeInvalid`\n\n```typescript\ntoBeInvalid()\n```\n\nThis allows you to check if an element, is currently invalid.\n\nAn element is invalid if it has an\n[`aria-invalid` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute)\nwith no value or a value of `\"true\"`, or if the result of\n[`checkValidity()`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation)\nis `false`.\n\n#### Examples\n\n```html\n\n\n\n\n\n\n\n\n```\n\n```javascript\nexpect(getByTestId('no-aria-invalid')).not.toBeInvalid()\nexpect(getByTestId('aria-invalid')).toBeInvalid()\nexpect(getByTestId('aria-invalid-value')).toBeInvalid()\nexpect(getByTestId('aria-invalid-false')).not.toBeInvalid()\n\nexpect(getByTestId('valid-form')).not.toBeInvalid()\nexpect(getByTestId('invalid-form')).toBeInvalid()\n```\n\n
\n\n### `toBeRequired`\n\n```typescript\ntoBeRequired()\n```\n\nThis allows you to check if a form element is currently required.\n\nAn element is required if it is having a `required` or `aria-required=\"true\"`\nattribute.\n\n#### Examples\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n```javascript\nexpect(getByTestId('required-input')).toBeRequired()\nexpect(getByTestId('aria-required-input')).toBeRequired()\nexpect(getByTestId('conflicted-input')).toBeRequired()\nexpect(getByTestId('aria-not-required-input')).not.toBeRequired()\nexpect(getByTestId('optional-input')).not.toBeRequired()\nexpect(getByTestId('unsupported-type')).not.toBeRequired()\nexpect(getByTestId('select')).toBeRequired()\nexpect(getByTestId('textarea')).toBeRequired()\nexpect(getByTestId('supported-role')).not.toBeRequired()\nexpect(getByTestId('supported-role-aria')).toBeRequired()\n```\n\n
\n\n### `toBeValid`\n\n```typescript\ntoBeValid()\n```\n\nThis allows you to check if the value of an element, is currently valid.\n\nAn element is valid if it has no\n[`aria-invalid` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute)s\nor an attribute value of `\"false\"`. The result of\n[`checkValidity()`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation)\nmust also be `true` if it's a form element.\n\n#### Examples\n\n```html\n\n\n\n\n\n\n\n\n```\n\n```javascript\nexpect(getByTestId('no-aria-invalid')).toBeValid()\nexpect(getByTestId('aria-invalid')).not.toBeValid()\nexpect(getByTestId('aria-invalid-value')).not.toBeValid()\nexpect(getByTestId('aria-invalid-false')).toBeValid()\n\nexpect(getByTestId('valid-form')).toBeValid()\nexpect(getByTestId('invalid-form')).not.toBeValid()\n```\n\n
\n\n### `toBeVisible`\n\n```typescript\ntoBeVisible()\n```\n\nThis allows you to check if an element is currently visible to the user.\n\nAn element is visible if **all** the following conditions are met:\n\n- it is present in the document\n- it does not have its css property `display` set to `none`\n- it does not have its css property `visibility` set to either `hidden` or\n `collapse`\n- it does not have its css property `opacity` set to `0`\n- its parent element is also visible (and so on up to the top of the DOM tree)\n- it does not have the\n [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)\n attribute\n- if `
` it has the `open` attribute\n\n#### Examples\n\n```html\n
Zero Opacity Example
\n\n Visibility Hidden Example\n
\nDisplay None Example
\n\n Hidden Parent Example\n
\nVisible Example
\nHidden Attribute Example
\n\n
\nTitle of hidden text
\n Hidden Details Example\n\n
\n```\n\n```javascript\nexpect(getByText('Zero Opacity Example')).not.toBeVisible()\nexpect(getByText('Visibility Hidden Example')).not.toBeVisible()\nexpect(getByText('Display None Example')).not.toBeVisible()\nexpect(getByText('Hidden Parent Example')).not.toBeVisible()\nexpect(getByText('Visible Example')).toBeVisible()\nexpect(getByText('Hidden Attribute Example')).not.toBeVisible()\nexpect(getByText('Hidden Details Example')).not.toBeVisible()\nexpect(getByText('Visible Details Example')).toBeVisible()\n```\n\nTitle of visible text
\nVisible Details Example
\n\n\n### `toContainElement`\n\n```typescript\ntoContainElement(element: HTMLElement | SVGElement | null)\n```\n\nThis allows you to assert whether an element contains another element as a\ndescendant or not.\n\n#### Examples\n\n```html\n\n```\n\n```javascript\nconst ancestor = getByTestId('ancestor')\nconst descendant = getByTestId('descendant')\nconst nonExistantElement = getByTestId('does-not-exist')\n\nexpect(ancestor).toContainElement(descendant)\nexpect(descendant).not.toContainElement(ancestor)\nexpect(ancestor).not.toContainElement(nonExistantElement)\n```\n\n
\n\n### `toContainHTML`\n\n```typescript\ntoContainHTML(htmlText: string)\n```\n\nAssert whether a string representing a HTML element is contained in another\nelement. The string should contain valid html, and not any incomplete html.\n\n#### Examples\n\n```html\n\n```\n\n```javascript\n// These are valid uses\nexpect(getByTestId('parent')).toContainHTML('')\nexpect(getByTestId('parent')).toContainHTML('')\nexpect(getByTestId('parent')).not.toContainHTML('
')\n\n// These won't work\nexpect(getByTestId('parent')).toContainHTML('data-testid=\"child\"')\nexpect(getByTestId('parent')).toContainHTML('data-testid')\nexpect(getByTestId('parent')).toContainHTML('')\n```\n\n> Chances are you probably do not need to use this matcher. We encourage testing\n> from the perspective of how the user perceives the app in a browser. That's\n> why testing against a specific DOM structure is not advised.\n>\n> It could be useful in situations where the code being tested renders html that\n> was obtained from an external source, and you want to validate that that html\n> code was used as intended.\n>\n> It should not be used to check DOM structure that you control. Please use\n> [`toContainElement`](#tocontainelement) instead.\n\n
\n\n### `toHaveAccessibleDescription`\n\n```typescript\ntoHaveAccessibleDescription(expectedAccessibleDescription?: string | RegExp)\n```\n\nThis allows you to assert that an element has the expected\n[accessible description](https://w3c.github.io/accname/).\n\nYou can pass the exact string of the expected accessible description, or you can\nmake a partial match passing a regular expression, or by using\n[expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring)/[expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).\n\n#### Examples\n\n```html\n
![\"User](\"avatar.jpg\"){kind=avatar}
\n\n\n### `toHaveAccessibleErrorMessage`\n\n```typescript\ntoHaveAccessibleErrorMessage(expectedAccessibleErrorMessage?: string | RegExp)\n```\n\nThis allows you to assert that an element has the expected\n[accessible error message](https://w3c.github.io/aria/#aria-errormessage).\n\nYou can pass the exact string of the expected accessible error message.\nAlternatively, you can perform a partial match by passing a regular expression\nor by using\n[expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring)/[expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).\n\n#### Examples\n\n```html\n
This field is invalid
\n\n\n\n\n### `toHaveAccessibleName`\n\n```typescript\ntoHaveAccessibleName(expectedAccessibleName?: string | RegExp)\n```\n\nThis allows you to assert that an element has the expected\n[accessible name](https://w3c.github.io/accname/). It is useful, for instance,\nto assert that form elements and buttons are properly labelled.\n\nYou can pass the exact string of the expected accessible name, or you can make a\npartial match passing a regular expression, or by using\n[expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring)/[expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp).\n\n#### Examples\n\n```html\n
Test content