web 3d图形渲染器
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1251 lines
61 KiB

  1. <div align="center">
  2. <h1>jest-dom</h1>
  3. <a href="https://www.emojione.com/emoji/1f989">
  4. <img
  5. height="80"
  6. width="80"
  7. alt="owl"
  8. src="https://raw.githubusercontent.com/testing-library/jest-dom/main/other/owl.png"
  9. />
  10. </a>
  11. <p>Custom jest matchers to test the state of the DOM</p>
  12. </div>
  13. ---
  14. <!-- prettier-ignore-start -->
  15. [![Build Status][build-badge]][build]
  16. [![Code Coverage][coverage-badge]][coverage]
  17. [![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
  18. [![MIT License][license-badge]][license]
  19. [![All Contributors](https://img.shields.io/badge/all_contributors-28-orange.svg?style=flat-square)](#contributors-)
  20. [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
  21. [![Discord][discord-badge]][discord]
  22. [![Watch on GitHub][github-watch-badge]][github-watch]
  23. [![Star on GitHub][github-star-badge]][github-star]
  24. [![Tweet][twitter-badge]][twitter]
  25. <!-- prettier-ignore-end -->
  26. ## The problem
  27. You want to use [jest][] to write tests that assert various things about the
  28. state of a DOM. As part of that goal, you want to avoid all the repetitive
  29. patterns that arise in doing so. Checking for an element's attributes, its text
  30. content, its css classes, you name it.
  31. ## This solution
  32. The `@testing-library/jest-dom` library provides a set of custom jest matchers
  33. that you can use to extend jest. These will make your tests more declarative,
  34. clear to read and to maintain.
  35. ## Table of Contents
  36. <!-- START doctoc generated TOC please keep comment here to allow auto update -->
  37. <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
  38. - [Installation](#installation)
  39. - [Usage](#usage)
  40. - [With TypeScript](#with-typescript)
  41. - [Custom matchers](#custom-matchers)
  42. - [`toBeDisabled`](#tobedisabled)
  43. - [`toBeEnabled`](#tobeenabled)
  44. - [`toBeEmpty`](#tobeempty)
  45. - [`toBeEmptyDOMElement`](#tobeemptydomelement)
  46. - [`toBeInTheDocument`](#tobeinthedocument)
  47. - [`toBeInvalid`](#tobeinvalid)
  48. - [`toBeRequired`](#toberequired)
  49. - [`toBeValid`](#tobevalid)
  50. - [`toBeVisible`](#tobevisible)
  51. - [`toContainElement`](#tocontainelement)
  52. - [`toContainHTML`](#tocontainhtml)
  53. - [`toHaveAttribute`](#tohaveattribute)
  54. - [`toHaveClass`](#tohaveclass)
  55. - [`toHaveFocus`](#tohavefocus)
  56. - [`toHaveFormValues`](#tohaveformvalues)
  57. - [`toHaveStyle`](#tohavestyle)
  58. - [`toHaveTextContent`](#tohavetextcontent)
  59. - [`toHaveValue`](#tohavevalue)
  60. - [`toHaveDisplayValue`](#tohavedisplayvalue)
  61. - [`toBeChecked`](#tobechecked)
  62. - [`toBePartiallyChecked`](#tobepartiallychecked)
  63. - [`toHaveDescription`](#tohavedescription)
  64. - [Deprecated matchers](#deprecated-matchers)
  65. - [`toBeInTheDOM`](#tobeinthedom)
  66. - [Inspiration](#inspiration)
  67. - [Other Solutions](#other-solutions)
  68. - [Guiding Principles](#guiding-principles)
  69. - [Contributors](#contributors)
  70. - [LICENSE](#license)
  71. <!-- END doctoc generated TOC please keep comment here to allow auto update -->
  72. ## Installation
  73. This module is distributed via [npm][npm] which is bundled with [node][node] and
  74. should be installed as one of your project's `devDependencies`:
  75. ```
  76. npm install --save-dev @testing-library/jest-dom
  77. ```
  78. or
  79. for installation with [yarn](https://yarnpkg.com/) package manager.
  80. ```
  81. yarn add --dev @testing-library/jest-dom
  82. ```
  83. > Note: We also recommend installing the jest-dom eslint plugin which provides
  84. > auto-fixable lint rules that prevent false positive tests and improve test
  85. > readability by ensuring you are using the right matchers in your tests. More
  86. > details can be found at
  87. > [eslint-plugin-jest-dom](https://github.com/testing-library/eslint-plugin-jest-dom).
  88. ## Usage
  89. Import `@testing-library/jest-dom` once (for instance in your [tests setup
  90. file][]) and you're good to go:
  91. [tests setup file]:
  92. https://jestjs.io/docs/en/configuration.html#setupfilesafterenv-array
  93. ```javascript
  94. // In your own jest-setup.js (or any other name)
  95. import '@testing-library/jest-dom'
  96. // In jest.config.js add (if you haven't already)
  97. setupFilesAfterEnv: ['<rootDir>/jest-setup.js']
  98. ```
  99. ### With TypeScript
  100. If you're using TypeScript, make sure your setup file is a `.ts` and not a `.js`
  101. to include the necessary types.
  102. You will also need to include your setup file in your `tsconfig.json` if you
  103. haven't already:
  104. ```json
  105. // In tsconfig.json
  106. "include": [
  107. ...
  108. "./jest-setup.ts"
  109. ],
  110. ```
  111. ## Custom matchers
  112. `@testing-library/jest-dom` can work with any library or framework that returns
  113. DOM elements from queries. The custom matcher examples below are written using
  114. matchers from `@testing-library`'s suite of libraries (e.g. `getByTestId`,
  115. `queryByTestId`, `getByText`, etc.)
  116. ### `toBeDisabled`
  117. ```typescript
  118. toBeDisabled()
  119. ```
  120. This allows you to check whether an element is disabled from the user's
  121. perspective.
  122. It matches if the element is a form control and the `disabled` attribute is
  123. specified on this element or the element is a descendant of a form element with
  124. a `disabled` attribute.
  125. According to the specification, the following elements can be
  126. [actually disabled](https://html.spec.whatwg.org/multipage/semantics-other.html#disabled-elements):
  127. `button`, `input`, `select`, `textarea`, `optgroup`, `option`, `fieldset`.
  128. #### Examples
  129. ```html
  130. <button data-testid="button" type="submit" disabled>submit</button>
  131. <fieldset disabled><input type="text" data-testid="input" /></fieldset>
  132. <a href="..." disabled>link</a>
  133. ```
  134. ```javascript
  135. expect(getByTestId('button')).toBeDisabled()
  136. expect(getByTestId('input')).toBeDisabled()
  137. expect(getByText('link')).not.toBeDisabled()
  138. ```
  139. > This custom matcher does not take into account the presence or absence of the
  140. > `aria-disabled` attribute. For more on why this is the case, check
  141. > [#144](https://github.com/testing-library/jest-dom/issues/144).
  142. <hr />
  143. ### `toBeEnabled`
  144. ```typescript
  145. toBeEnabled()
  146. ```
  147. This allows you to check whether an element is not disabled from the user's
  148. perspective.
  149. It works like `not.toBeDisabled()`. Use this matcher to avoid double negation in
  150. your tests.
  151. > This custom matcher does not take into account the presence or absence of the
  152. > `aria-disabled` attribute. For more on why this is the case, check
  153. > [#144](https://github.com/testing-library/jest-dom/issues/144).
  154. <hr />
  155. ### `toBeEmpty`
  156. ```typescript
  157. toBeEmpty()
  158. ```
  159. This allows you to assert whether an element has content or not.
  160. #### Examples
  161. ```html
  162. <span data-testid="not-empty"><span data-testid="empty"></span></span>
  163. ```
  164. ```javascript
  165. expect(getByTestId('empty')).toBeEmpty()
  166. expect(getByTestId('not-empty')).not.toBeEmpty()
  167. ```
  168. > Note: This matcher is being deprecated due to a name clash with
  169. > `jest-extended`. See more info in #216. In the future, please use only:
  170. > [`toBeEmptyDOMElement`](#toBeEmptyDOMElement)
  171. <hr />
  172. ### `toBeEmptyDOMElement`
  173. ```typescript
  174. toBeEmptyDOMElement()
  175. ```
  176. This allows you to assert whether an element has no visible content for the
  177. user. It ignores comments but will fail if the element contains white-space.
  178. #### Examples
  179. ```html
  180. <span data-testid="not-empty"><span data-testid="empty"></span></span>
  181. <span data-testid="with-whitespace"> </span>
  182. <span data-testid="with-comment"><!-- comment --></span>
  183. ```
  184. ```javascript
  185. expect(getByTestId('empty')).toBeEmptyDOMElement()
  186. expect(getByTestId('not-empty')).not.toBeEmptyDOMElement()
  187. expect(getByTestId('with-whitespace')).not.toBeEmptyDOMElement()
  188. ```
  189. <hr />
  190. ### `toBeInTheDocument`
  191. ```typescript
  192. toBeInTheDocument()
  193. ```
  194. This allows you to assert whether an element is present in the document or not.
  195. #### Examples
  196. ```html
  197. <span data-testid="html-element"><span>Html Element</span></span>
  198. <svg data-testid="svg-element"></svg>
  199. ```
  200. ```javascript
  201. expect(
  202. getByTestId(document.documentElement, 'html-element'),
  203. ).toBeInTheDocument()
  204. expect(getByTestId(document.documentElement, 'svg-element')).toBeInTheDocument()
  205. expect(
  206. queryByTestId(document.documentElement, 'does-not-exist'),
  207. ).not.toBeInTheDocument()
  208. ```
  209. > Note: This matcher does not find detached elements. The element must be added
  210. > to the document to be found by toBeInTheDocument. If you desire to search in a
  211. > detached element please use: [`toContainElement`](#tocontainelement)
  212. <hr />
  213. ### `toBeInvalid`
  214. ```typescript
  215. toBeInvalid()
  216. ```
  217. This allows you to check if an element, is currently invalid.
  218. An element is invalid if it has an
  219. [`aria-invalid` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute)
  220. with no value or a value of `"true"`, or if the result of
  221. [`checkValidity()`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation)
  222. is `false`.
  223. #### Examples
  224. ```html
  225. <input data-testid="no-aria-invalid" />
  226. <input data-testid="aria-invalid" aria-invalid />
  227. <input data-testid="aria-invalid-value" aria-invalid="true" />
  228. <input data-testid="aria-invalid-false" aria-invalid="false" />
  229. <form data-testid="valid-form">
  230. <input />
  231. </form>
  232. <form data-testid="invalid-form">
  233. <input required />
  234. </form>
  235. ```
  236. ```javascript
  237. expect(getByTestId('no-aria-invalid')).not.toBeInvalid()
  238. expect(getByTestId('aria-invalid')).toBeInvalid()
  239. expect(getByTestId('aria-invalid-value')).toBeInvalid()
  240. expect(getByTestId('aria-invalid-false')).not.toBeInvalid()
  241. expect(getByTestId('valid-form')).not.toBeInvalid()
  242. expect(getByTestId('invalid-form')).toBeInvalid()
  243. ```
  244. <hr />
  245. ### `toBeRequired`
  246. ```typescript
  247. toBeRequired()
  248. ```
  249. This allows you to check if a form element is currently required.
  250. An element is required if it is having a `required` or `aria-required="true"`
  251. attribute.
  252. #### Examples
  253. ```html
  254. <input data-testid="required-input" required />
  255. <input data-testid="aria-required-input" aria-required="true" />
  256. <input data-testid="conflicted-input" required aria-required="false" />
  257. <input data-testid="aria-not-required-input" aria-required="false" />
  258. <input data-testid="optional-input" />
  259. <input data-testid="unsupported-type" type="image" required />
  260. <select data-testid="select" required></select>
  261. <textarea data-testid="textarea" required></textarea>
  262. <div data-testid="supported-role" role="tree" required></div>
  263. <div data-testid="supported-role-aria" role="tree" aria-required="true"></div>
  264. ```
  265. ```javascript
  266. expect(getByTestId('required-input')).toBeRequired()
  267. expect(getByTestId('aria-required-input')).toBeRequired()
  268. expect(getByTestId('conflicted-input')).toBeRequired()
  269. expect(getByTestId('aria-not-required-input')).not.toBeRequired()
  270. expect(getByTestId('optional-input')).not.toBeRequired()
  271. expect(getByTestId('unsupported-type')).not.toBeRequired()
  272. expect(getByTestId('select')).toBeRequired()
  273. expect(getByTestId('textarea')).toBeRequired()
  274. expect(getByTestId('supported-role')).not.toBeRequired()
  275. expect(getByTestId('supported-role-aria')).toBeRequired()
  276. ```
  277. <hr />
  278. ### `toBeValid`
  279. ```typescript
  280. toBeValid()
  281. ```
  282. This allows you to check if the value of an element, is currently valid.
  283. An element is valid if it has no
  284. [`aria-invalid` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute)s
  285. or an attribute value of `"false"`. The result of
  286. [`checkValidity()`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation)
  287. must also be `true` if it's a form element.
  288. #### Examples
  289. ```html
  290. <input data-testid="no-aria-invalid" />
  291. <input data-testid="aria-invalid" aria-invalid />
  292. <input data-testid="aria-invalid-value" aria-invalid="true" />
  293. <input data-testid="aria-invalid-false" aria-invalid="false" />
  294. <form data-testid="valid-form">
  295. <input />
  296. </form>
  297. <form data-testid="invalid-form">
  298. <input required />
  299. </form>
  300. ```
  301. ```javascript
  302. expect(getByTestId('no-aria-invalid')).toBeValid()
  303. expect(getByTestId('aria-invalid')).not.toBeValid()
  304. expect(getByTestId('aria-invalid-value')).not.toBeValid()
  305. expect(getByTestId('aria-invalid-false')).toBeValid()
  306. expect(getByTestId('valid-form')).toBeValid()
  307. expect(getByTestId('invalid-form')).not.toBeValid()
  308. ```
  309. <hr />
  310. ### `toBeVisible`
  311. ```typescript
  312. toBeVisible()
  313. ```
  314. This allows you to check if an element is currently visible to the user.
  315. An element is visible if **all** the following conditions are met:
  316. - it is present in the document
  317. - it does not have its css property `display` set to `none`
  318. - it does not have its css property `visibility` set to either `hidden` or
  319. `collapse`
  320. - it does not have its css property `opacity` set to `0`
  321. - its parent element is also visible (and so on up to the top of the DOM tree)
  322. - it does not have the
  323. [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
  324. attribute
  325. - if `<details />` it has the `open` attribute
  326. #### Examples
  327. ```html
  328. <div data-testid="zero-opacity" style="opacity: 0">Zero Opacity Example</div>
  329. <div data-testid="visibility-hidden" style="visibility: hidden">
  330. Visibility Hidden Example
  331. </div>
  332. <div data-testid="display-none" style="display: none">Display None Example</div>
  333. <div style="opacity: 0">
  334. <span data-testid="hidden-parent">Hidden Parent Example</span>
  335. </div>
  336. <div data-testid="visible">Visible Example</div>
  337. <div data-testid="hidden-attribute" hidden>Hidden Attribute Example</div>
  338. ```
  339. ```javascript
  340. expect(getByText('Zero Opacity Example')).not.toBeVisible()
  341. expect(getByText('Visibility Hidden Example')).not.toBeVisible()
  342. expect(getByText('Display None Example')).not.toBeVisible()
  343. expect(getByText('Hidden Parent Example')).not.toBeVisible()
  344. expect(getByText('Visible Example')).toBeVisible()
  345. expect(getByText('Hidden Attribute Example')).not.toBeVisible()
  346. ```
  347. <hr />
  348. ### `toContainElement`
  349. ```typescript
  350. toContainElement(element: HTMLElement | SVGElement | null)
  351. ```
  352. This allows you to assert whether an element contains another element as a
  353. descendant or not.
  354. #### Examples
  355. ```html
  356. <span data-testid="ancestor"><span data-testid="descendant"></span></span>
  357. ```
  358. ```javascript
  359. const ancestor = getByTestId('ancestor')
  360. const descendant = getByTestId('descendant')
  361. const nonExistantElement = getByTestId('does-not-exist')
  362. expect(ancestor).toContainElement(descendant)
  363. expect(descendant).not.toContainElement(ancestor)
  364. expect(ancestor).not.toContainElement(nonExistantElement)
  365. ```
  366. <hr />
  367. ### `toContainHTML`
  368. ```typescript
  369. toContainHTML(htmlText: string)
  370. ```
  371. Assert whether a string representing a HTML element is contained in another
  372. element:
  373. #### Examples
  374. ```html
  375. <span data-testid="parent"><span data-testid="child"></span></span>
  376. ```
  377. ```javascript
  378. expect(getByTestId('parent')).toContainHTML('<span data-testid="child"></span>')
  379. ```
  380. > Chances are you probably do not need to use this matcher. We encourage testing
  381. > from the perspective of how the user perceives the app in a browser. That's
  382. > why testing against a specific DOM structure is not advised.
  383. >
  384. > It could be useful in situations where the code being tested renders html that
  385. > was obtained from an external source, and you want to validate that that html
  386. > code was used as intended.
  387. >
  388. > It should not be used to check DOM structure that you control. Please use
  389. > [`toContainElement`](#tocontainelement) instead.
  390. <hr />
  391. ### `toHaveAttribute`
  392. ```typescript
  393. toHaveAttribute(attr: string, value?: any)
  394. ```
  395. This allows you to check whether the given element has an attribute or not. You
  396. can also optionally check that the attribute has a specific expected value or
  397. partial match using
  398. [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring)/[expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp)
  399. #### Examples
  400. ```html
  401. <button data-testid="ok-button" type="submit" disabled>ok</button>
  402. ```
  403. ```javascript
  404. const button = getByTestId('ok-button')
  405. expect(button).toHaveAttribute('disabled')
  406. expect(button).toHaveAttribute('type', 'submit')
  407. expect(button).not.toHaveAttribute('type', 'button')
  408. expect(button).toHaveAttribute('type', expect.stringContaining('sub'))
  409. expect(button).toHaveAttribute('type', expect.not.stringContaining('but'))
  410. ```
  411. <hr />
  412. ### `toHaveClass`
  413. ```typescript
  414. toHaveClass(...classNames: string[], options?: {exact: boolean})
  415. ```
  416. This allows you to check whether the given element has certain classes within
  417. its `class` attribute.
  418. You must provide at least one class, unless you are asserting that an element
  419. does not have any classes.
  420. #### Examples
  421. ```html
  422. <button data-testid="delete-button" class="btn extra btn-danger">
  423. Delete item
  424. </button>
  425. <button data-testid="no-classes">No Classes</button>
  426. ```
  427. ```javascript
  428. const deleteButton = getByTestId('delete-button')
  429. const noClasses = getByTestId('no-classes')
  430. expect(deleteButton).toHaveClass('extra')
  431. expect(deleteButton).toHaveClass('btn-danger btn')
  432. expect(deleteButton).toHaveClass('btn-danger', 'btn')
  433. expect(deleteButton).not.toHaveClass('btn-link')
  434. expect(deleteButton).toHaveClass('btn-danger extra btn', {exact: true}) // to check if the element has EXACTLY a set of classes
  435. expect(deleteButton).not.toHaveClass('btn-danger extra', {exact: true}) // if it has more than expected it is going to fail
  436. expect(noClasses).not.toHaveClass()
  437. ```
  438. <hr />
  439. ### `toHaveFocus`
  440. ```typescript
  441. toHaveFocus()
  442. ```
  443. This allows you to assert whether an element has focus or not.
  444. #### Examples
  445. ```html
  446. <div><input type="text" data-testid="element-to-focus" /></div>
  447. ```
  448. ```javascript
  449. const input = getByTestId('element-to-focus')
  450. input.focus()
  451. expect(input).toHaveFocus()
  452. input.blur()
  453. expect(input).not.toHaveFocus()
  454. ```
  455. <hr />
  456. ### `toHaveFormValues`
  457. ```typescript
  458. toHaveFormValues(expectedValues: {
  459. [name: string]: any
  460. })
  461. ```
  462. This allows you to check if a form or fieldset contains form controls for each
  463. given name, and having the specified value.
  464. > It is important to stress that this matcher can only be invoked on a [form][]
  465. > or a [fieldset][] element.
  466. >
  467. > This allows it to take advantage of the [.elements][] property in `form` and
  468. > `fieldset` to reliably fetch all form controls within them.
  469. >
  470. > This also avoids the possibility that users provide a container that contains
  471. > more than one `form`, thereby intermixing form controls that are not related,
  472. > and could even conflict with one another.
  473. This matcher abstracts away the particularities with which a form control value
  474. is obtained depending on the type of form control. For instance, `<input>`
  475. elements have a `value` attribute, but `<select>` elements do not. Here's a list
  476. of all cases covered:
  477. - `<input type="number">` elements return the value as a **number**, instead of
  478. a string.
  479. - `<input type="checkbox">` elements:
  480. - if there's a single one with the given `name` attribute, it is treated as a
  481. **boolean**, returning `true` if the checkbox is checked, `false` if
  482. unchecked.
  483. - if there's more than one checkbox with the same `name` attribute, they are
  484. all treated collectively as a single form control, which returns the value
  485. as an **array** containing all the values of the selected checkboxes in the
  486. collection.
  487. - `<input type="radio">` elements are all grouped by the `name` attribute, and
  488. such a group treated as a single form control. This form control returns the
  489. value as a **string** corresponding to the `value` attribute of the selected
  490. radio button within the group.
  491. - `<input type="text">` elements return the value as a **string**. This also
  492. applies to `<input>` elements having any other possible `type` attribute
  493. that's not explicitly covered in different rules above (e.g. `search`,
  494. `email`, `date`, `password`, `hidden`, etc.)
  495. - `<select>` elements without the `multiple` attribute return the value as a
  496. **string** corresponding to the `value` attribute of the selected `option`, or
  497. `undefined` if there's no selected option.
  498. - `<select multiple>` elements return the value as an **array** containing all
  499. the values of the [selected options][].
  500. - `<textarea>` elements return their value as a **string**. The value
  501. corresponds to their node content.
  502. The above rules make it easy, for instance, to switch from using a single select
  503. control to using a group of radio buttons. Or to switch from a multi select
  504. control, to using a group of checkboxes. The resulting set of form values used
  505. by this matcher to compare against would be the same.
  506. [selected options]:
  507. https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions
  508. [form]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement
  509. [fieldset]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldSetElement
  510. [.elements]:
  511. https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
  512. #### Examples
  513. ```html
  514. <form data-testid="login-form">
  515. <input type="text" name="username" value="jane.doe" />
  516. <input type="password" name="password" value="12345678" />
  517. <input type="checkbox" name="rememberMe" checked />
  518. <button type="submit">Sign in</button>
  519. </form>
  520. ```
  521. ```javascript
  522. expect(getByTestId('login-form')).toHaveFormValues({
  523. username: 'jane.doe',
  524. rememberMe: true,
  525. })
  526. ```
  527. ### `toHaveStyle`
  528. ```typescript
  529. toHaveStyle(css: string | object)
  530. ```
  531. This allows you to check if a certain element has some specific css properties
  532. with specific values applied. It matches only if the element has _all_ the
  533. expected properties applied, not just some of them.
  534. #### Examples
  535. ```html
  536. <button
  537. data-testid="delete-button"
  538. style="display: none; background-color: red"
  539. >
  540. Delete item
  541. </button>
  542. ```
  543. ```javascript
  544. const button = getByTestId('delete-button')
  545. expect(button).toHaveStyle('display: none')
  546. expect(button).toHaveStyle({display: 'none'})
  547. expect(button).toHaveStyle(`
  548. background-color: red;
  549. display: none;
  550. `)
  551. expect(button).toHaveStyle({
  552. backgroundColor: 'red',
  553. display: 'none',
  554. })
  555. expect(button).not.toHaveStyle(`
  556. background-color: blue;
  557. display: none;
  558. `)
  559. expect(button).not.toHaveStyle({
  560. backgroundColor: 'blue',
  561. display: 'none',
  562. })
  563. ```
  564. This also works with rules that are applied to the element via a class name for
  565. which some rules are defined in a stylesheet currently active in the document.
  566. The usual rules of css precedence apply.
  567. <hr />
  568. ### `toHaveTextContent`
  569. ```typescript
  570. toHaveTextContent(text: string | RegExp, options?: {normalizeWhitespace: boolean})
  571. ```
  572. This allows you to check whether the given element has a text content or not.
  573. When a `string` argument is passed through, it will perform a partial
  574. case-sensitive match to the element content.
  575. To perform a case-insensitive match, you can use a `RegExp` with the `/i`
  576. modifier.
  577. If you want to match the whole content, you can use a `RegExp` to do it.
  578. #### Examples
  579. ```html
  580. <span data-testid="text-content">Text Content</span>
  581. ```
  582. ```javascript
  583. const element = getByTestId('text-content')
  584. expect(element).toHaveTextContent('Content')
  585. expect(element).toHaveTextContent(/^Text Content$/) // to match the whole content
  586. expect(element).toHaveTextContent(/content$/i) // to use case-insensitive match
  587. expect(element).not.toHaveTextContent('content')
  588. ```
  589. <hr />
  590. ### `toHaveValue`
  591. ```typescript
  592. toHaveValue(value: string | string[] | number)
  593. ```
  594. This allows you to check whether the given form element has the specified value.
  595. It accepts `<input>`, `<select>` and `<textarea>` elements with the exception of
  596. `<input type="checkbox">` and `<input type="radio">`, which can be meaningfully
  597. matched only using [`toBeChecked`](#tobechecked) or
  598. [`toHaveFormValues`](#tohaveformvalues).
  599. For all other form elements, the value is matched using the same algorithm as in
  600. [`toHaveFormValues`](#tohaveformvalues) does.
  601. #### Examples
  602. ```html
  603. <input type="text" value="text" data-testid="input-text" />
  604. <input type="number" value="5" data-testid="input-number" />
  605. <input type="text" data-testid="input-empty" />
  606. <select multiple data-testid="select-number">
  607. <option value="first">First Value</option>
  608. <option value="second" selected>Second Value</option>
  609. <option value="third" selected>Third Value</option>
  610. </select>
  611. ```
  612. ##### Using DOM Testing Library
  613. ```javascript
  614. const textInput = getByTestId('input-text')
  615. const numberInput = getByTestId('input-number')
  616. const emptyInput = getByTestId('input-empty')
  617. const selectInput = getByTestId('select-number')
  618. expect(textInput).toHaveValue('text')
  619. expect(numberInput).toHaveValue(5)
  620. expect(emptyInput).not.toHaveValue()
  621. expect(selectInput).not.toHaveValue(['second', 'third'])
  622. ```
  623. <hr />
  624. ### `toHaveDisplayValue`
  625. ```typescript
  626. toHaveDisplayValue(value: string | RegExp | (string|RegExp)[])
  627. ```
  628. This allows you to check whether the given form element has the specified
  629. displayed value (the one the end user will see). It accepts `<input>`,
  630. `<select>` and `<textarea>` elements with the exception of
  631. `<input type="checkbox">` and `<input type="radio">`, which can be meaningfully
  632. matched only using [`toBeChecked`](#tobechecked) or
  633. [`toHaveFormValues`](#tohaveformvalues).
  634. #### Examples
  635. ```html
  636. <label for="input-example">First name</label>
  637. <input type="text" id="input-example" value="Luca" />
  638. <label for="textarea-example">Description</label>
  639. <textarea id="textarea-example">An example description here.</textarea>
  640. <label for="single-select-example">Fruit</label>
  641. <select id="single-select-example">
  642. <option value="">Select a fruit...</option>
  643. <option value="banana">Banana</option>
  644. <option value="ananas">Ananas</option>
  645. <option value="avocado">Avocado</option>
  646. </select>
  647. <label for="multiple-select-example">Fruits</label>
  648. <select id="multiple-select-example" multiple>
  649. <option value="">Select a fruit...</option>
  650. <option value="banana" selected>Banana</option>
  651. <option value="ananas">Ananas</option>
  652. <option value="avocado" selected>Avocado</option>
  653. </select>
  654. ```
  655. ##### Using DOM Testing Library
  656. ```javascript
  657. const input = screen.getByLabelText('First name')
  658. const textarea = screen.getByLabelText('Description')
  659. const selectSingle = screen.getByLabelText('Fruit')
  660. const selectMultiple = screen.getByLabelText('Fruits')
  661. expect(input).toHaveDisplayValue('Luca')
  662. expect(input).toHaveDisplayValue(/Luc/)
  663. expect(textarea).toHaveDisplayValue('An example description here.')
  664. expect(textarea).toHaveDisplayValue(/example/)
  665. expect(selectSingle).toHaveDisplayValue('Select a fruit...')
  666. expect(selectSingle).toHaveDisplayValue(/Select/)
  667. expect(selectMultiple).toHaveDisplayValue([/Avocado/, 'Banana'])
  668. ```
  669. <hr />
  670. ### `toBeChecked`
  671. ```typescript
  672. toBeChecked()
  673. ```
  674. This allows you to check whether the given element is checked. It accepts an
  675. `input` of type `checkbox` or `radio` and elements with a `role` of `checkbox`,
  676. `radio` or `switch` with a valid `aria-checked` attribute of `"true"` or
  677. `"false"`.
  678. #### Examples
  679. ```html
  680. <input type="checkbox" checked data-testid="input-checkbox-checked" />
  681. <input type="checkbox" data-testid="input-checkbox-unchecked" />
  682. <div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />
  683. <div
  684. role="checkbox"
  685. aria-checked="false"
  686. data-testid="aria-checkbox-unchecked"
  687. />
  688. <input type="radio" checked value="foo" data-testid="input-radio-checked" />
  689. <input type="radio" value="foo" data-testid="input-radio-unchecked" />
  690. <div role="radio" aria-checked="true" data-testid="aria-radio-checked" />
  691. <div role="radio" aria-checked="false" data-testid="aria-radio-unchecked" />
  692. <div role="switch" aria-checked="true" data-testid="aria-switch-checked" />
  693. <div role="switch" aria-checked="false" data-testid="aria-switch-unchecked" />
  694. ```
  695. ```javascript
  696. const inputCheckboxChecked = getByTestId('input-checkbox-checked')
  697. const inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked')
  698. const ariaCheckboxChecked = getByTestId('aria-checkbox-checked')
  699. const ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked')
  700. expect(inputCheckboxChecked).toBeChecked()
  701. expect(inputCheckboxUnchecked).not.toBeChecked()
  702. expect(ariaCheckboxChecked).toBeChecked()
  703. expect(ariaCheckboxUnchecked).not.toBeChecked()
  704. const inputRadioChecked = getByTestId('input-radio-checked')
  705. const inputRadioUnchecked = getByTestId('input-radio-unchecked')
  706. const ariaRadioChecked = getByTestId('aria-radio-checked')
  707. const ariaRadioUnchecked = getByTestId('aria-radio-unchecked')
  708. expect(inputRadioChecked).toBeChecked()
  709. expect(inputRadioUnchecked).not.toBeChecked()
  710. expect(ariaRadioChecked).toBeChecked()
  711. expect(ariaRadioUnchecked).not.toBeChecked()
  712. const ariaSwitchChecked = getByTestId('aria-switch-checked')
  713. const ariaSwitchUnchecked = getByTestId('aria-switch-unchecked')
  714. expect(ariaSwitchChecked).toBeChecked()
  715. expect(ariaSwitchUnchecked).not.toBeChecked()
  716. ```
  717. <hr />
  718. ### `toBePartiallyChecked`
  719. ```typescript
  720. toBePartiallyChecked()
  721. ```
  722. This allows you to check whether the given element is partially checked. It
  723. accepts an `input` of type `checkbox` and elements with a `role` of `checkbox`
  724. with a `aria-checked="mixed"`, or `input` of type `checkbox` with
  725. `indeterminate` set to `true`
  726. #### Examples
  727. ```html
  728. <input type="checkbox" aria-checked="mixed" data-testid="aria-checkbox-mixed" />
  729. <input type="checkbox" checked data-testid="input-checkbox-checked" />
  730. <input type="checkbox" data-testid="input-checkbox-unchecked" />
  731. <div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />
  732. <div
  733. role="checkbox"
  734. aria-checked="false"
  735. data-testid="aria-checkbox-unchecked"
  736. />
  737. <input type="checkbox" data-testid="input-checkbox-indeterminate" />
  738. ```
  739. ```javascript
  740. const ariaCheckboxMixed = getByTestId('aria-checkbox-mixed')
  741. const inputCheckboxChecked = getByTestId('input-checkbox-checked')
  742. const inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked')
  743. const ariaCheckboxChecked = getByTestId('aria-checkbox-checked')
  744. const ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked')
  745. const inputCheckboxIndeterminate = getByTestId('input-checkbox-indeterminate')
  746. expect(ariaCheckboxMixed).toBePartiallyChecked()
  747. expect(inputCheckboxChecked).not.toBePartiallyChecked()
  748. expect(inputCheckboxUnchecked).not.toBePartiallyChecked()
  749. expect(ariaCheckboxChecked).not.toBePartiallyChecked()
  750. expect(ariaCheckboxUnchecked).not.toBePartiallyChecked()
  751. inputCheckboxIndeterminate.indeterminate = true
  752. expect(inputCheckboxIndeterminate).toBePartiallyChecked()
  753. ```
  754. <hr />
  755. ### `toHaveDescription`
  756. ```typescript
  757. toHaveDescription(text: string | RegExp)
  758. ```
  759. This allows you to check whether the given element has a description or not.
  760. An element gets its description via the
  761. [`aria-describedby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
  762. Set this to the `id` of one or more other elements. These elements may be nested
  763. inside, be outside, or a sibling of the passed in element.
  764. Whitespace is normalized. Using multiple ids will
  765. [join the referenced elements’ text content separated by a space](https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_description).
  766. When a `string` argument is passed through, it will perform a whole
  767. case-sensitive match to the description text.
  768. To perform a case-insensitive match, you can use a `RegExp` with the `/i`
  769. modifier.
  770. To perform a partial match, you can pass a `RegExp` or use
  771. `expect.stringContaining("partial string")`.
  772. #### Examples
  773. ```html
  774. <button aria-label="Close" aria-describedby="description-close">
  775. X
  776. </button>
  777. <div id="description-close">
  778. Closing will discard any changes
  779. </div>
  780. <button>Delete</button>
  781. ```
  782. ```javascript
  783. const closeButton = getByRole('button', {name: 'Close'})
  784. expect(closeButton).toHaveDescription('Closing will discard any changes')
  785. expect(closeButton).toHaveDescription(/will discard/) // to partially match
  786. expect(closeButton).toHaveDescription(expect.stringContaining('will discard')) // to partially match
  787. expect(closeButton).toHaveDescription(/^closing/i) // to use case-insensitive match
  788. expect(closeButton).not.toHaveDescription('Other description')
  789. const deleteButton = getByRole('button', {name: 'Delete'})
  790. expect(deleteButton).not.toHaveDescription()
  791. expect(deleteButton).toHaveDescription('') // Missing or empty description always becomes a blank string
  792. ```
  793. ## Deprecated matchers
  794. ### `toBeInTheDOM`
  795. ```typescript
  796. toBeInTheDOM()
  797. ```
  798. This allows you to check whether a value is a DOM element, or not.
  799. Contrary to what its name implies, this matcher only checks that you passed to
  800. it a valid DOM element. It does not have a clear definition of what "the DOM"
  801. is. Therefore, it does not check whether that element is contained anywhere.
  802. This is the main reason why this matcher is deprecated, and will be removed in
  803. the next major release. You can follow the discussion around this decision in
  804. more detail [here](https://github.com/testing-library/jest-dom/issues/34).
  805. As an alternative, you can use [`toBeInTheDocument`](#tobeinthedocument) or
  806. [`toContainElement`](#tocontainelement). Or if you just want to check if a value
  807. is indeed an `HTMLElement` you can always use some of
  808. [jest's built-in matchers](https://jestjs.io/docs/en/expect#tobeinstanceofclass):
  809. ```js
  810. expect(document.querySelector('.ok-button')).toBeInstanceOf(HTMLElement)
  811. expect(document.querySelector('.cancel-button')).toBeTruthy()
  812. ```
  813. > Note: The differences between `toBeInTheDOM` and `toBeInTheDocument` are
  814. > significant. Replacing all uses of `toBeInTheDOM` with `toBeInTheDocument`
  815. > will likely cause unintended consequences in your tests. Please make sure when
  816. > replacing `toBeInTheDOM` to read through the documentation of the proposed
  817. > alternatives to see which use case works better for your needs.
  818. ## Inspiration
  819. This whole library was extracted out of Kent C. Dodds' [DOM Testing
  820. Library][dom-testing-library], which was in turn extracted out of [React Testing
  821. Library][react-testing-library].
  822. The intention is to make this available to be used independently of these other
  823. libraries, and also to make it more clear that these other libraries are
  824. independent from jest, and can be used with other tests runners as well.
  825. ## Other Solutions
  826. I'm not aware of any, if you are please [make a pull request][prs] and add it
  827. here!
  828. If you would like to further test the accessibility and validity of the DOM
  829. consider [`jest-axe`](https://github.com/nickcolley/jest-axe). It doesn't
  830. overlap with `jest-dom` but can complement it for more in-depth accessibility
  831. checking (eg: validating `aria` attributes or ensuring unique id attributes).
  832. ## Guiding Principles
  833. > [The more your tests resemble the way your software is used, the more
  834. > confidence they can give you.][guiding-principle]
  835. This library follows the same guiding principles as its mother library [DOM
  836. Testing Library][dom-testing-library]. Go [check them out][guiding-principle]
  837. for more details.
  838. Additionally, with respect to custom DOM matchers, this library aims to maintain
  839. a minimal but useful set of them, while avoiding bloating itself with merely
  840. convenient ones that can be easily achieved with other APIs. In general, the
  841. overall criteria for what is considered a useful custom matcher to add to this
  842. library, is that doing the equivalent assertion on our own makes the test code
  843. more verbose, less clear in its intent, and/or harder to read.
  844. ## Contributors
  845. Thanks goes to these people ([emoji key][emojis]):
  846. <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
  847. <!-- prettier-ignore-start -->
  848. <!-- markdownlint-disable -->
  849. <table>
  850. <tr>
  851. <td align="center"><a href="https://kentcdodds.com"><img src="https://avatars.githubusercontent.com/u/1500684?v=3?s=100" width="100px;" alt=""/><br /><sub><b>Kent C. Dodds</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=kentcdodds" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=kentcdodds" title="Documentation">📖</a> <a href="#infra-kentcdodds" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/testing-library/jest-dom/commits?author=kentcdodds" title="Tests">⚠️</a></td>
  852. <td align="center"><a href="http://audiolion.github.io"><img src="https://avatars1.githubusercontent.com/u/2430381?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ryan Castner</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=audiolion" title="Documentation">📖</a></td>
  853. <td align="center"><a href="https://www.dnlsandiego.com"><img src="https://avatars0.githubusercontent.com/u/8008023?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Sandiego</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=dnlsandiego" title="Code">💻</a></td>
  854. <td align="center"><a href="https://github.com/Miklet"><img src="https://avatars2.githubusercontent.com/u/12592677?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Paweł Mikołajczyk</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=Miklet" title="Code">💻</a></td>
  855. <td align="center"><a href="http://co.linkedin.com/in/alejandronanez/"><img src="https://avatars3.githubusercontent.com/u/464978?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alejandro Ñáñez Ortiz</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=alejandronanez" title="Documentation">📖</a></td>
  856. <td align="center"><a href="https://github.com/pbomb"><img src="https://avatars0.githubusercontent.com/u/1402095?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Matt Parrish</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/issues?q=author%3Apbomb" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/jest-dom/commits?author=pbomb" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=pbomb" title="Documentation">📖</a> <a href="https://github.com/testing-library/jest-dom/commits?author=pbomb" title="Tests">⚠️</a></td>
  857. <td align="center"><a href="https://github.com/wKovacs64"><img src="https://avatars1.githubusercontent.com/u/1288694?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Justin Hall</b></sub></a><br /><a href="#platform-wKovacs64" title="Packaging/porting to new platform">📦</a></td>
  858. </tr>
  859. <tr>
  860. <td align="center"><a href="https://github.com/antoaravinth"><img src="https://avatars1.githubusercontent.com/u/1241511?s=460&v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anto Aravinth</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=antoaravinth" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=antoaravinth" title="Tests">⚠️</a> <a href="https://github.com/testing-library/jest-dom/commits?author=antoaravinth" title="Documentation">📖</a></td>
  861. <td align="center"><a href="https://github.com/JonahMoses"><img src="https://avatars2.githubusercontent.com/u/3462296?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jonah Moses</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=JonahMoses" title="Documentation">📖</a></td>
  862. <td align="center"><a href="http://team.thebrain.pro"><img src="https://avatars1.githubusercontent.com/u/4002543?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Łukasz Gandecki</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=lgandecki" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=lgandecki" title="Tests">⚠️</a> <a href="https://github.com/testing-library/jest-dom/commits?author=lgandecki" title="Documentation">📖</a></td>
  863. <td align="center"><a href="https://sompylasar.github.io"><img src="https://avatars2.githubusercontent.com/u/498274?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ivan Babak</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/issues?q=author%3Asompylasar" title="Bug reports">🐛</a> <a href="#ideas-sompylasar" title="Ideas, Planning, & Feedback">🤔</a></td>
  864. <td align="center"><a href="https://github.com/jday3"><img src="https://avatars3.githubusercontent.com/u/4439618?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jesse Day</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=jday3" title="Code">💻</a></td>
  865. <td align="center"><a href="http://gnapse.github.io"><img src="https://avatars0.githubusercontent.com/u/15199?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ernesto García</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=gnapse" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=gnapse" title="Documentation">📖</a> <a href="https://github.com/testing-library/jest-dom/commits?author=gnapse" title="Tests">⚠️</a></td>
  866. <td align="center"><a href="http://ociweb.com/mark/"><img src="https://avatars0.githubusercontent.com/u/79312?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mark Volkmann</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/issues?q=author%3Amvolkmann" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/jest-dom/commits?author=mvolkmann" title="Code">💻</a></td>
  867. </tr>
  868. <tr>
  869. <td align="center"><a href="https://github.com/smacpherson64"><img src="https://avatars1.githubusercontent.com/u/1659099?v=4?s=100" width="100px;" alt=""/><br /><sub><b>smacpherson64</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=smacpherson64" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=smacpherson64" title="Documentation">📖</a> <a href="https://github.com/testing-library/jest-dom/commits?author=smacpherson64" title="Tests">⚠️</a></td>
  870. <td align="center"><a href="https://github.com/jgoz"><img src="https://avatars2.githubusercontent.com/u/132233?v=4?s=100" width="100px;" alt=""/><br /><sub><b>John Gozde</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/issues?q=author%3Ajgoz" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/jest-dom/commits?author=jgoz" title="Code">💻</a></td>
  871. <td align="center"><a href="https://github.com/callada"><img src="https://avatars2.githubusercontent.com/u/7830590?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Iwona</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=callada" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=callada" title="Documentation">📖</a> <a href="https://github.com/testing-library/jest-dom/commits?author=callada" title="Tests">⚠️</a></td>
  872. <td align="center"><a href="https://github.com/6ewis"><img src="https://avatars0.githubusercontent.com/u/840609?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Lewis</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=6ewis" title="Code">💻</a></td>
  873. <td align="center"><a href="https://blog.lourenci.com/"><img src="https://avatars3.githubusercontent.com/u/2339362?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Leandro Lourenci</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/issues?q=author%3Alourenci" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/jest-dom/commits?author=lourenci" title="Documentation">📖</a> <a href="https://github.com/testing-library/jest-dom/commits?author=lourenci" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=lourenci" title="Tests">⚠️</a></td>
  874. <td align="center"><a href="https://github.com/mufasa71"><img src="https://avatars1.githubusercontent.com/u/626420?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shukhrat Mukimov</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/issues?q=author%3Amufasa71" title="Bug reports">🐛</a></td>
  875. <td align="center"><a href="https://github.com/dreyks"><img src="https://avatars3.githubusercontent.com/u/1481264?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Roman Usherenko</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=dreyks" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=dreyks" title="Tests">⚠️</a></td>
  876. </tr>
  877. <tr>
  878. <td align="center"><a href="http://josephhsu.com"><img src="https://avatars1.githubusercontent.com/u/648?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Joe Hsu</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=jhsu" title="Documentation">📖</a></td>
  879. <td align="center"><a href="https://twitter.com/diegohaz"><img src="https://avatars3.githubusercontent.com/u/3068563?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Haz</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/issues?q=author%3Adiegohaz" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/jest-dom/commits?author=diegohaz" title="Code">💻</a></td>
  880. <td align="center"><a href="https://blog.revathskumar.com"><img src="https://avatars3.githubusercontent.com/u/463904?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Revath S Kumar</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=revathskumar" title="Code">💻</a></td>
  881. <td align="center"><a href="https://raccoon.studio"><img src="https://avatars0.githubusercontent.com/u/4989733?v=4?s=100" width="100px;" alt=""/><br /><sub><b>hiwelo.</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=hiwelo" title="Code">💻</a> <a href="#ideas-hiwelo" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/testing-library/jest-dom/commits?author=hiwelo" title="Tests">⚠️</a></td>
  882. <td align="center"><a href="https://github.com/lukaszfiszer"><img src="https://avatars3.githubusercontent.com/u/1201711?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Łukasz Fiszer</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=lukaszfiszer" title="Code">💻</a></td>
  883. <td align="center"><a href="https://github.com/jeanchung"><img src="https://avatars0.githubusercontent.com/u/10778036?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jean Chung</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=jeanchung" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=jeanchung" title="Tests">⚠️</a></td>
  884. <td align="center"><a href="https://github.com/CarlaTeo"><img src="https://avatars3.githubusercontent.com/u/9220147?v=4?s=100" width="100px;" alt=""/><br /><sub><b>CarlaTeo</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=CarlaTeo" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=CarlaTeo" title="Tests">⚠️</a></td>
  885. </tr>
  886. <tr>
  887. <td align="center"><a href="https://github.com/YardenShoham"><img src="https://avatars3.githubusercontent.com/u/20454870?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yarden Shoham</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=YardenShoham" title="Documentation">📖</a></td>
  888. <td align="center"><a href="http://jagascript.com"><img src="https://avatars0.githubusercontent.com/u/4562878?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jaga Santagostino</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/issues?q=author%3Akandros" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/jest-dom/commits?author=kandros" title="Tests">⚠️</a> <a href="https://github.com/testing-library/jest-dom/commits?author=kandros" title="Documentation">📖</a></td>
  889. <td align="center"><a href="https://github.com/connormeredith"><img src="https://avatars0.githubusercontent.com/u/4907463?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Connor Meredith</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=connormeredith" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=connormeredith" title="Tests">⚠️</a> <a href="https://github.com/testing-library/jest-dom/commits?author=connormeredith" title="Documentation">📖</a></td>
  890. <td align="center"><a href="https://github.com/pwolaq"><img src="https://avatars3.githubusercontent.com/u/10261750?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pawel Wolak</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=pwolaq" title="Tests">⚠️</a></td>
  891. <td align="center"><a href="https://michaeldeboey.be"><img src="https://avatars3.githubusercontent.com/u/6643991?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michaël De Boey</b></sub></a><br /><a href="#infra-MichaelDeBoey" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
  892. <td align="center"><a href="https://github.com/jzarzeckis"><img src="https://avatars3.githubusercontent.com/u/919350?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jānis Zaržeckis</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=jzarzeckis" title="Documentation">📖</a></td>
  893. <td align="center"><a href="https://github.com/koala-lava"><img src="https://avatars0.githubusercontent.com/u/15828770?v=4?s=100" width="100px;" alt=""/><br /><sub><b>koala-lava</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=koala-lava" title="Documentation">📖</a></td>
  894. </tr>
  895. <tr>
  896. <td align="center"><a href="https://jpblanco.dev"><img src="https://avatars1.githubusercontent.com/u/16567863?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Juan Pablo Blanco</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=JPBlancoDB" title="Documentation">📖</a></td>
  897. <td align="center"><a href="https://github.com/benmonro"><img src="https://avatars3.githubusercontent.com/u/399236?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ben Monro</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=benmonro" title="Documentation">📖</a></td>
  898. <td align="center"><a href="http://jeffbernstein.io"><img src="https://avatars1.githubusercontent.com/u/6685560?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jeff Bernstein</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=jeffbernst" title="Documentation">📖</a></td>
  899. <td align="center"><a href="https://github.com/SergiCL"><img src="https://avatars3.githubusercontent.com/u/41625166?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sergi</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=SergiCL" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=SergiCL" title="Tests">⚠️</a></td>
  900. <td align="center"><a href="https://skovy.dev"><img src="https://avatars1.githubusercontent.com/u/5247455?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Spencer Miskoviak</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=skovy" title="Documentation">📖</a></td>
  901. <td align="center"><a href="https://twitter.com/jonrimmer"><img src="https://avatars1.githubusercontent.com/u/183786?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jon Rimmer</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=jonrimmer" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=jonrimmer" title="Tests">⚠️</a></td>
  902. <td align="center"><a href="https://github.com/cloud-walker"><img src="https://avatars3.githubusercontent.com/u/1144075?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luca Barone</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=cloud-walker" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=cloud-walker" title="Tests">⚠️</a> <a href="#ideas-cloud-walker" title="Ideas, Planning, & Feedback">🤔</a></td>
  903. </tr>
  904. <tr>
  905. <td align="center"><a href="https://github.com/mfelmy"><img src="https://avatars2.githubusercontent.com/u/29504917?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Malte Felmy</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=mfelmy" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=mfelmy" title="Tests">⚠️</a></td>
  906. <td align="center"><a href="https://ghuser.io/Ishaan28malik"><img src="https://avatars3.githubusercontent.com/u/27343592?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Championrunner</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=Ishaan28malik" title="Documentation">📖</a></td>
  907. <td align="center"><a href="https://icing.space/"><img src="https://avatars0.githubusercontent.com/u/2635733?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Patrick Smith</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=BurntCaramel" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=BurntCaramel" title="Tests">⚠️</a> <a href="https://github.com/testing-library/jest-dom/commits?author=BurntCaramel" title="Documentation">📖</a></td>
  908. <td align="center"><a href="https://rubenmoya.dev"><img src="https://avatars3.githubusercontent.com/u/905225?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rubén Moya</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=rubenmoya" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=rubenmoya" title="Tests">⚠️</a> <a href="https://github.com/testing-library/jest-dom/commits?author=rubenmoya" title="Documentation">📖</a></td>
  909. <td align="center"><a href="https://danielavalero.com/"><img src="https://avatars1.githubusercontent.com/u/1307954?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniela Valero</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=DanielaValero" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=DanielaValero" title="Tests">⚠️</a> <a href="https://github.com/testing-library/jest-dom/commits?author=DanielaValero" title="Documentation">📖</a></td>
  910. <td align="center"><a href="https://github.com/missilev"><img src="https://avatars1.githubusercontent.com/u/33201468?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vladislav Katsura</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=missilev" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=missilev" title="Tests">⚠️</a></td>
  911. <td align="center"><a href="http://stderr.timfischbach.de"><img src="https://avatars3.githubusercontent.com/u/26554?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tim Fischbach</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=tf" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=tf" title="Tests">⚠️</a> <a href="#ideas-tf" title="Ideas, Planning, & Feedback">🤔</a></td>
  912. </tr>
  913. <tr>
  914. <td align="center"><a href="http://katieboedges.com/"><img src="https://avatars1.githubusercontent.com/u/8322476?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Katie Boedges</b></sub></a><br /><a href="#infra-kboedges" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
  915. <td align="center"><a href="https://github.com/brrianalexis"><img src="https://avatars2.githubusercontent.com/u/51463930?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Brian Alexis</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=brrianalexis" title="Tests">⚠️</a></td>
  916. <td align="center"><a href="https://twitter.com/boriscoder"><img src="https://avatars2.githubusercontent.com/u/812240?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Boris Serdiuk</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/issues?q=author%3Ajust-boris" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/jest-dom/commits?author=just-boris" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=just-boris" title="Tests">⚠️</a></td>
  917. <td align="center"><a href="http://danawoodman.com"><img src="https://avatars1.githubusercontent.com/u/157695?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dana Woodman</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=danawoodman" title="Documentation">📖</a></td>
  918. <td align="center"><a href="https://github.com/MoSattler"><img src="https://avatars2.githubusercontent.com/u/64152453?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mo Sattler</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=MoSattler" title="Documentation">📖</a></td>
  919. <td align="center"><a href="https://github.com/geoffrich"><img src="https://avatars2.githubusercontent.com/u/4992896?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Geoff Rich</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=geoffrich" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=geoffrich" title="Tests">⚠️</a> <a href="#ideas-geoffrich" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/testing-library/jest-dom/issues?q=author%3Ageoffrich" title="Bug reports">🐛</a></td>
  920. <td align="center"><a href="https://github.com/syneva-runyan"><img src="https://avatars0.githubusercontent.com/u/20505588?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Syneva</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=syneva-runyan" title="Code">💻</a></td>
  921. </tr>
  922. <tr>
  923. <td align="center"><a href="https://nickmccurdy.com/"><img src="https://avatars0.githubusercontent.com/u/927220?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nick McCurdy</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=nickmccurdy" title="Documentation">📖</a> <a href="https://github.com/testing-library/jest-dom/issues?q=author%3Anickmccurdy" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/jest-dom/commits?author=nickmccurdy" title="Code">💻</a></td>
  924. <td align="center"><a href="https://obedparla.com/"><img src="https://avatars1.githubusercontent.com/u/10674462?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Obed Marquez Parlapiano</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=obedparla" title="Documentation">📖</a></td>
  925. <td align="center"><a href="https://github.com/calebeby"><img src="https://avatars.githubusercontent.com/u/13206945?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Caleb Eby</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=calebeby" title="Documentation">📖</a> <a href="https://github.com/testing-library/jest-dom/commits?author=calebeby" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=calebeby" title="Tests">⚠️</a></td>
  926. <td align="center"><a href="https://github.com/marcelbarner"><img src="https://avatars.githubusercontent.com/u/12788744?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Marcel Barner</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=marcelbarner" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=marcelbarner" title="Tests">⚠️</a></td>
  927. </tr>
  928. </table>
  929. <!-- markdownlint-restore -->
  930. <!-- prettier-ignore-end -->
  931. <!-- ALL-CONTRIBUTORS-LIST:END -->
  932. This project follows the [all-contributors][all-contributors] specification.
  933. Contributions of any kind welcome!
  934. ## LICENSE
  935. MIT
  936. <!-- prettier-ignore-start -->
  937. [jest]: https://facebook.github.io/jest/
  938. [dom-testing-library]: https://github.com/testing-library/dom-testing-library
  939. [react-testing-library]:
  940. https://github.com/testing-library/react-testing-library
  941. [npm]: https://www.npmjs.com/
  942. [node]: https://nodejs.org
  943. [build-badge]: https://img.shields.io/github/workflow/status/testing-library/jest-dom/validate?logo=github&style=flat-square
  944. [build]: https://github.com/testing-library/jest-dom/actions?query=workflow%3Avalidate
  945. [coverage-badge]:
  946. https://img.shields.io/codecov/c/github/testing-library/jest-dom.svg?style=flat-square
  947. [coverage]: https://codecov.io/github/testing-library/jest-dom
  948. [version-badge]:
  949. https://img.shields.io/npm/v/@testing-library/jest-dom.svg?style=flat-square
  950. [package]: https://www.npmjs.com/package/@testing-library/jest-dom
  951. [downloads-badge]:
  952. https://img.shields.io/npm/dm/@testing-library/jest-dom.svg?style=flat-square
  953. [npmtrends]: http://www.npmtrends.com/@testing-library/jest-dom
  954. [license-badge]:
  955. https://img.shields.io/npm/l/@testing-library/jest-dom.svg?style=flat-square
  956. [license]: https://github.com/testing-library/jest-dom/blob/main/LICENSE
  957. [prs-badge]:
  958. https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
  959. [prs]: http://makeapullrequest.com
  960. [coc-badge]:
  961. https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
  962. [coc]:
  963. https://github.com/testing-library/jest-dom/blob/main/other/CODE_OF_CONDUCT.md
  964. [github-watch-badge]:
  965. https://img.shields.io/github/watchers/testing-library/jest-dom.svg?style=social
  966. [github-watch]: https://github.com/testing-library/jest-dom/watchers
  967. [github-star-badge]:
  968. https://img.shields.io/github/stars/testing-library/jest-dom.svg?style=social
  969. [github-star]: https://github.com/testing-library/jest-dom/stargazers
  970. [twitter]:
  971. https://twitter.com/intent/tweet?text=Check%20out%20jest-dom%20by%20%40gnapse%20https%3A%2F%2Fgithub.com%2Ftesting-library%2Fjest-dom%20%F0%9F%91%8D
  972. [twitter-badge]:
  973. https://img.shields.io/twitter/url/https/github.com/testing-library/jest-dom.svg?style=social
  974. [emojis]: https://github.com/all-contributors/all-contributors#emoji-key
  975. [all-contributors]: https://github.com/all-contributors/all-contributors
  976. [all-contributors-badge]:
  977. https://img.shields.io/github/all-contributors/testing-library/jest-dom?color=orange&style=flat-square
  978. [guiding-principle]: https://testing-library.com/docs/guiding-principles
  979. [discord-badge]: https://img.shields.io/discord/723559267868737556.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff&style=flat-square
  980. [discord]: https://discord.gg/testing-library
  981. <!-- prettier-ignore-end -->