{"id":16172066,"url":"https://github.com/pablo-abc/chai-jsdom","last_synced_at":"2026-05-01T03:36:26.811Z","repository":{"id":98794233,"uuid":"456306496","full_name":"pablo-abc/chai-jsdom","owner":"pablo-abc","description":"A plugin for Chai that builds on top of @testing-library/jest-dom to provide its same checkers but for Chai.","archived":false,"fork":false,"pushed_at":"2022-02-07T21:47:04.000Z","size":155,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-13T12:16:55.283Z","etag":null,"topics":["chai","plugin","testing"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pablo-abc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-07T00:09:45.000Z","updated_at":"2022-02-07T00:10:56.000Z","dependencies_parsed_at":"2023-05-25T10:45:32.169Z","dependency_job_id":null,"html_url":"https://github.com/pablo-abc/chai-jsdom","commit_stats":{"total_commits":27,"total_committers":1,"mean_commits":27.0,"dds":0.0,"last_synced_commit":"15c38313906044daf919ad68325c44a655086515"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablo-abc%2Fchai-jsdom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablo-abc%2Fchai-jsdom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablo-abc%2Fchai-jsdom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablo-abc%2Fchai-jsdom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pablo-abc","download_url":"https://codeload.github.com/pablo-abc/chai-jsdom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247615476,"owners_count":20967183,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chai","plugin","testing"],"created_at":"2024-10-10T03:44:45.200Z","updated_at":"2026-05-01T03:36:21.778Z","avatar_url":"https://github.com/pablo-abc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# chai-jsdom\n\n[![NPM Version](https://img.shields.io/npm/v/chai-jsdom)](https://www.npmjs.com/package/chai-jsdom)\n[![NPM Downloads](https://img.shields.io/npm/dw/chai-jsdom)](https://www.npmjs.com/package/chai-jsdom)\n[![Tests](https://github.com/pablo-abc/chai-jsdom/actions/workflows/test.yml/badge.svg)](https://github.com/pablo-abc/chai-jsdom/actions/workflows/test.yml)\n[![codecov](https://codecov.io/gh/pablo-abc/chai-jsdom/branch/main/graph/badge.svg?token=8XCCMF1ISJ)](https://codecov.io/gh/pablo-abc/chai-jsdom)\n\nA plugin for [Chai][chai] that builds on top of [@testing-library/jest-dom](https://github.com/testing-library/jest-dom) to provide its same checkers but for Chai.\n\nThe following docs are adjusted from `@testing-library/jest-dom`'s README.\n\n\u003e **NOTE**: this package is really new, and mostly just a wrapper on top of `@testing-library/jest-dom`. Most likely some error messages won't be that useful to you. That said, I'm successfully using this with [Felte](https://github.com/pablo-abc/felte).\n\n## Installation\n\nThis module is distributed via [npm][npm] which is bundled with [node][node] and\nshould be installed as one of your project's `devDependencies`:\n\n```\nnpm install --save-dev chai-jsdom\n```\n\nor\n\nfor installation with [yarn](https://yarnpkg.com/) package manager.\n\n```\nyarn add --dev chai-jsdom\n```\n\n## Usage\n\nImport `chai-jsdom` and use it with `chai`'s `use`:\n\n```javascript\n// In your test file\nimport { use, expect } from 'chai';\nimport chaiJSDOM from 'chai-jsdom'\n\nuse(chaiJSDOM);\n```\n\n## Custom matchers\n\n`chai-jsdom` can work with any library or framework that returns\nDOM elements from queries. The custom matcher examples below are written using\nmatchers from `@testing-library`'s suite of libraries (e.g. `getByTestId`,\n`queryByTestId`, `getByText`, etc.)\n\n### `.disabled`\n\nThis allows you to check whether an element is disabled from the user's\nperspective. According to the specification, the following elements can be\n[disabled](https://html.spec.whatwg.org/multipage/semantics-other.html#disabled-elements):\n`button`, `input`, `select`, `textarea`, `optgroup`, `option`, `fieldset`, and\ncustom elements.\n\nThis custom matcher considers an element as disabled if the element is among the\ntypes of elements that can be disabled (listed above), and the `disabled`\nattribute is present. It will also consider the element as disabled if it's\ninside a parent form element that supports being disabled and has the `disabled`\nattribute present.\n\n#### Examples\n\n```html\n\u003cbutton data-testid=\"button\" type=\"submit\" disabled\u003esubmit\u003c/button\u003e\n\u003cfieldset disabled\u003e\u003cinput type=\"text\" data-testid=\"input\" /\u003e\u003c/fieldset\u003e\n\u003ca href=\"...\" disabled\u003elink\u003c/a\u003e\n```\n\n```javascript\nexpect(getByTestId('button')).to.be.disabled\nexpect(getByTestId('input')).to.be.disabled\nexpect(getByText('link')).not.to.be.disabled\n```\n\n\u003e This custom matcher does not take into account the presence or absence of the\n\u003e `aria-disabled` attribute. For more on why this is the case, check\n\u003e [#144](https://github.com/testing-library/jest-dom/issues/144).\n\n\u003chr /\u003e\n\n### `.enabled`\n\nThis allows you to check whether an element is not disabled from the user's\nperspective.\n\nIt works like `not.disabled`. Use this matcher to avoid double negation in\nyour tests.\n\n\u003e This custom matcher does not take into account the presence or absence of the\n\u003e `aria-disabled` attribute. For more on why this is the case, check\n\u003e [#144](https://github.com/testing-library/jest-dom/issues/144).\n\n\u003chr /\u003e\n\n### `.empty`\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\nIt extends Chai's `empty` when used with an HTML element.\n\n#### Examples\n\n```html\n\u003cspan data-testid=\"not-empty\"\u003e\u003cspan data-testid=\"empty\"\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan data-testid=\"with-whitespace\"\u003e \u003c/span\u003e\n\u003cspan data-testid=\"with-comment\"\u003e\u003c!-- comment --\u003e\u003c/span\u003e\n```\n\n```javascript\nexpect(getByTestId('empty')).to.be.empty\nexpect(getByTestId('not-empty')).not.to.be.empty\nexpect(getByTestId('with-whitespace')).not.to.be.empty\n```\n\n\u003chr /\u003e\n\n### `.document`\n\nThis allows you to assert whether an element is present in the document or not.\n\n#### Examples\n\n```html\n\u003cspan data-testid=\"html-element\"\u003e\u003cspan\u003eHtml Element\u003c/span\u003e\u003c/span\u003e\n\u003csvg data-testid=\"svg-element\"\u003e\u003c/svg\u003e\n```\n\n```javascript\nexpect(\n  getByTestId(document.documentElement, 'html-element'),\n).to.be.in.document\nexpect(getByTestId(document.documentElement, 'svg-element')).to.be.in.document\nexpect(\n  queryByTestId(document.documentElement, 'does-not-exist'),\n).not.to.be.in.document\n```\n\n\u003e Note: This matcher does not find detached elements. The element must be added\n\u003e to the document to be found by toBeInTheDocument. If you desire to search in a\n\u003e detached element please use: [`.contain`](#contain)\n\n\u003chr /\u003e\n\n### `.invalid`\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\u003cinput data-testid=\"no-aria-invalid\" /\u003e\n\u003cinput data-testid=\"aria-invalid\" aria-invalid /\u003e\n\u003cinput data-testid=\"aria-invalid-value\" aria-invalid=\"true\" /\u003e\n\u003cinput data-testid=\"aria-invalid-false\" aria-invalid=\"false\" /\u003e\n\n\u003cform data-testid=\"valid-form\"\u003e\n  \u003cinput /\u003e\n\u003c/form\u003e\n\n\u003cform data-testid=\"invalid-form\"\u003e\n  \u003cinput required /\u003e\n\u003c/form\u003e\n```\n\n```javascript\nexpect(getByTestId('no-aria-invalid')).not.to.be.invalid\nexpect(getByTestId('aria-invalid')).to.be.invalid\nexpect(getByTestId('aria-invalid-value')).to.be.invalid\nexpect(getByTestId('aria-invalid-false')).not.to.be.invalid\n\nexpect(getByTestId('valid-form')).not.to.be.invalid\nexpect(getByTestId('invalid-form')).to.be.invalid\n```\n\n\u003chr /\u003e\n\n### `.required`\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\u003cinput data-testid=\"required-input\" required /\u003e\n\u003cinput data-testid=\"aria-required-input\" aria-required=\"true\" /\u003e\n\u003cinput data-testid=\"conflicted-input\" required aria-required=\"false\" /\u003e\n\u003cinput data-testid=\"aria-not-required-input\" aria-required=\"false\" /\u003e\n\u003cinput data-testid=\"optional-input\" /\u003e\n\u003cinput data-testid=\"unsupported-type\" type=\"image\" required /\u003e\n\u003cselect data-testid=\"select\" required\u003e\u003c/select\u003e\n\u003ctextarea data-testid=\"textarea\" required\u003e\u003c/textarea\u003e\n\u003cdiv data-testid=\"supported-role\" role=\"tree\" required\u003e\u003c/div\u003e\n\u003cdiv data-testid=\"supported-role-aria\" role=\"tree\" aria-required=\"true\"\u003e\u003c/div\u003e\n```\n\n```javascript\nexpect(getByTestId('required-input')).to.be.required\nexpect(getByTestId('aria-required-input')).to.be.required\nexpect(getByTestId('conflicted-input')).to.be.required\nexpect(getByTestId('aria-not-required-input')).not.to.be.required\nexpect(getByTestId('optional-input')).not.to.be.required\nexpect(getByTestId('unsupported-type')).not.to.be.required\nexpect(getByTestId('select')).to.be.required\nexpect(getByTestId('textarea')).to.be.required\nexpect(getByTestId('supported-role')).not.to.be.required\nexpect(getByTestId('supported-role-aria')).to.be.required\n```\n\n\u003chr /\u003e\n\n### `.valid`\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\u003cinput data-testid=\"no-aria-invalid\" /\u003e\n\u003cinput data-testid=\"aria-invalid\" aria-invalid /\u003e\n\u003cinput data-testid=\"aria-invalid-value\" aria-invalid=\"true\" /\u003e\n\u003cinput data-testid=\"aria-invalid-false\" aria-invalid=\"false\" /\u003e\n\n\u003cform data-testid=\"valid-form\"\u003e\n  \u003cinput /\u003e\n\u003c/form\u003e\n\n\u003cform data-testid=\"invalid-form\"\u003e\n  \u003cinput required /\u003e\n\u003c/form\u003e\n```\n\n```javascript\nexpect(getByTestId('no-aria-invalid')).to.be.valid\nexpect(getByTestId('aria-invalid')).not.to.be.valid\nexpect(getByTestId('aria-invalid-value')).not.to.be.valid\nexpect(getByTestId('aria-invalid-false')).to.be.valid\n\nexpect(getByTestId('valid-form')).to.be.valid\nexpect(getByTestId('invalid-form')).not.to.be.valid\n```\n\n\u003chr /\u003e\n\n### `.visible`\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 `\u003cdetails /\u003e` it has the `open` attribute\n\n#### Examples\n\n```html\n\u003cdiv data-testid=\"zero-opacity\" style=\"opacity: 0\"\u003eZero Opacity Example\u003c/div\u003e\n\u003cdiv data-testid=\"visibility-hidden\" style=\"visibility: hidden\"\u003e\n  Visibility Hidden Example\n\u003c/div\u003e\n\u003cdiv data-testid=\"display-none\" style=\"display: none\"\u003eDisplay None Example\u003c/div\u003e\n\u003cdiv style=\"opacity: 0\"\u003e\n  \u003cspan data-testid=\"hidden-parent\"\u003eHidden Parent Example\u003c/span\u003e\n\u003c/div\u003e\n\u003cdiv data-testid=\"visible\"\u003eVisible Example\u003c/div\u003e\n\u003cdiv data-testid=\"hidden-attribute\" hidden\u003eHidden Attribute Example\u003c/div\u003e\n```\n\n```javascript\nexpect(getByText('Zero Opacity Example')).not.to.be.visible\nexpect(getByText('Visibility Hidden Example')).not.to.be.visible\nexpect(getByText('Display None Example')).not.to.be.visible\nexpect(getByText('Hidden Parent Example')).not.to.be.visible\nexpect(getByText('Visible Example')).to.be.visible\nexpect(getByText('Hidden Attribute Example')).not.to.be.visible\n```\n\n\u003chr /\u003e\n\n### `.contain`\n\nThis allows you to assert whether an element contains another element as a\ndescendant or not.\n\nThis extends Chai's `contain`. You can use `contains`, `include` and\n`includes` as aliases.\n\n#### Examples\n\n```html\n\u003cspan data-testid=\"ancestor\"\u003e\u003cspan data-testid=\"descendant\"\u003e\u003c/span\u003e\u003c/span\u003e\n```\n\n```javascript\nconst ancestor = getByTestId('ancestor')\nconst descendant = getByTestId('descendant')\nconst nonExistantElement = getByTestId('does-not-exist')\n\nexpect(ancestor).to.contain(descendant)\nexpect(descendant).not.to.contain(ancestor)\nexpect(ancestor).not.to.contain(nonExistantElement)\n```\n\n\u003chr /\u003e\n\n### `.html`\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\u003cspan data-testid=\"parent\"\u003e\u003cspan data-testid=\"child\"\u003e\u003c/span\u003e\u003c/span\u003e\n```\n\n```javascript\n// These are valid uses\nexpect(getByTestId('parent')).to.contain.html('\u003cspan data-testid=\"child\"\u003e\u003c/span\u003e')\nexpect(getByTestId('parent')).to.contain.html('\u003cspan data-testid=\"child\" /\u003e')\nexpect(getByTestId('parent')).not.to.contain.html('\u003cbr /\u003e')\n\n// These won't work\nexpect(getByTestId('parent')).to.contain.html('data-testid=\"child\"')\nexpect(getByTestId('parent')).to.contain.html('data-testid')\nexpect(getByTestId('parent')).to.contain.html('\u003c/span\u003e')\n```\n\n\u003e Chances are you probably do not need to use this matcher. We encourage testing\n\u003e from the perspective of how the user perceives the app in a browser. That's\n\u003e why testing against a specific DOM structure is not advised.\n\u003e\n\u003e It could be useful in situations where the code being tested renders html that\n\u003e was obtained from an external source, and you want to validate that that html\n\u003e code was used as intended.\n\u003e\n\u003e It should not be used to check DOM structure that you control. Please use\n\u003e [`.contain`](#contain) instead.\n\n\u003chr /\u003e\n\n### `.description`\n\nThis allows you to assert that an element has the expected\n[accessible description](https://w3c.github.io/accname/).\n\nEvery assertion done after `.description` is done on top of the accessible\ndescription of the element tested.\n\n#### Examples\n\n```html\n\u003ca\n  data-testid=\"link\"\n  href=\"/\"\n  aria-label=\"Home page\"\n  title=\"A link to start over\"\n  \u003eStart\u003c/a\n\u003e\n\u003ca data-testid=\"extra-link\" href=\"/about\" aria-label=\"About page\"\u003eAbout\u003c/a\u003e\n\u003cimg src=\"avatar.jpg\" data-testid=\"avatar\" alt=\"User profile pic\" /\u003e\n\u003cimg\n  src=\"logo.jpg\"\n  data-testid=\"logo\"\n  alt=\"Company logo\"\n  aria-describedby=\"t1\"\n/\u003e\n\u003cspan id=\"t1\" role=\"presentation\"\u003eThe logo of Our Company\u003c/span\u003e\n```\n\n```js\nexpect(getByTestId('link')).to.have.a.description\nexpect(getByTestId('link')).to.have.a.description.that.equals('A link to start over')\nexpect(getByTestId('link')).to.have.a.description.that.does.not.equal('Home page')\nexpect(getByTestId('extra-link')).not.to.have.a.description\nexpect(getByTestId('avatar')).not.to.have.a.description\nexpect(getByTestId('logo')).to.have.a.description.that.does.not.equal('Company logo')\nexpect(getByTestId('logo')).to.have.a.description.that.equals(\n  'The logo of Our Company',\n)\nexpect(getByTestId('logo')).to.have.a.description.that.contains(\n  'Our Company',\n)\n```\n\n\u003chr /\u003e\n\n### `.accessibleName`\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\nEvery assertion done after `.accessibleName` is done on top of the accessible\nname of the element tested.\n\n#### Examples\n\n```html\n\u003cimg data-testid=\"img-alt\" src=\"\" alt=\"Test alt\" /\u003e\n\u003cimg data-testid=\"img-empty-alt\" src=\"\" alt=\"\" /\u003e\n\u003csvg data-testid=\"svg-title\"\u003e\u003ctitle\u003eTest title\u003c/title\u003e\u003c/svg\u003e\n\u003cbutton data-testid=\"button-img-alt\"\u003e\u003cimg src=\"\" alt=\"Test\" /\u003e\u003c/button\u003e\n\u003cp\u003e\u003cimg data-testid=\"img-paragraph\" src=\"\" alt=\"\" /\u003e Test content\u003c/p\u003e\n\u003cbutton data-testid=\"svg-button\"\u003e\u003csvg\u003e\u003ctitle\u003eTest\u003c/title\u003e\u003c/svg\u003e\u003c/p\u003e\n\u003cdiv\u003e\u003csvg data-testid=\"svg-without-title\"\u003e\u003c/svg\u003e\u003c/div\u003e\n\u003cinput data-testid=\"input-title\" title=\"test\" /\u003e\n```\n\n```javascript\nexpect(getByTestId('img-alt')).to.have.accessibleName.that.equals('Test alt')\nexpect(getByTestId('img-empty-alt')).not.to.have.accessibleName\nexpect(getByTestId('svg-title')).to.have.accessibleName.that.equals('Test title')\nexpect(getByTestId('button-img-alt')).to.have.accessibleName\nexpect(getByTestId('img-paragraph')).not.to.have.accessibleName\nexpect(getByTestId('svg-button')).to.have.accessibleName\nexpect(getByTestId('svg-without-title')).not.to.have.accessibleName\nexpect(getByTestId('input-title')).to.have.accessibleName\n```\n\n\u003chr /\u003e\n\n### `.attribute`\n\nThis allows you to check whether the given element has an attribute or not.\n\nEvery assertion done after this is done on the value of the attribute selected.\n\n#### Examples\n\n```html\n\u003cbutton data-testid=\"ok-button\" type=\"submit\" disabled\u003eok\u003c/button\u003e\n```\n\n```javascript\nconst button = getByTestId('ok-button')\n\nexpect(button).to.have.attribute('disabled')\nexpect(button).to.have.attribute('type').that.equals('submit')\nexpect(button).not.to.have.attribute('type').that.equals('button')\n\nexpect(button).to.have.attribute('type').that.contains('sub')\nexpect(button).to.have.attribute('type').that.does.not.contain('butt')\n```\n\n\u003chr /\u003e\n\n### `.class`\n\nThis allows you to check whether the given element has certain classes within\nits `class` attribute.\n\nEvery assertion done after `.class` is done on the class of the element being\ntested. `include`, `members` and `equal` get extended to support a string with\nmultiple classes.\n\n#### Examples\n\n```html\n\u003cbutton data-testid=\"delete-button\" class=\"btn extra btn-danger\"\u003e\n  Delete item\n\u003c/button\u003e\n\u003cbutton data-testid=\"no-classes\"\u003eNo Classes\u003c/button\u003e\n```\n\n```javascript\nconst deleteButton = getByTestId('delete-button')\nconst noClasses = getByTestId('no-classes')\n\nexpect(deleteButton).to.have.class.that.contains('extra')\nexpect(deleteButton).to.have.class.that.contains('btn-danger btn')\nexpect(deleteButton).to.have.class.that.contains.members(['btn-danger', 'btn'])\nexpect(deleteButton).to.have.class.that.does.not.contain('btn-link')\n\nexpect(deleteButton).to.have.class.that.equals('btn-danger extra btn') // to check if the element has EXACTLY a set of classes\nexpect(deleteButton).to.have.class.that.does.not.equal('btn-danger extra') // if it has more than expected it is going to fail\n\nexpect(noClasses).not.to.have.class\n```\n\n\u003chr /\u003e\n\n### `.focused`\n\nThis allows you to assert whether an element has focus or not.\n\nYou can use `.focus` as an alias.\n\n#### Examples\n\n```html\n\u003cdiv\u003e\u003cinput type=\"text\" data-testid=\"element-to-focus\" /\u003e\u003c/div\u003e\n```\n\n```javascript\nconst input = getByTestId('element-to-focus')\n\ninput.focus()\nexpect(input).to.have.focus()\n\ninput.blur()\nexpect(input).not.to.be.focused()\n```\n\n\u003chr /\u003e\n\n### `.formValues`\n\nThis allows you to check if a form or fieldset contains form controls for each\ngiven name, and having the specified value.\n\n\u003e It is important to stress that this matcher can only be invoked on a [form][]\n\u003e or a [fieldset][] element.\n\u003e\n\u003e This allows it to take advantage of the [.elements][] property in `form` and\n\u003e `fieldset` to reliably fetch all form controls within them.\n\u003e\n\u003e This also avoids the possibility that users provide a container that contains\n\u003e more than one `form`, thereby intermixing form controls that are not related,\n\u003e and could even conflict with one another.\n\nThis matcher abstracts away the particularities with which a form control value\nis obtained depending on the type of form control. For instance, `\u003cinput\u003e`\nelements have a `value` attribute, but `\u003cselect\u003e` elements do not. Here's a list\nof all cases covered:\n\n- `\u003cinput type=\"number\"\u003e` elements return the value as a **number**, instead of\n  a string.\n- `\u003cinput type=\"checkbox\"\u003e` elements:\n  - if there's a single one with the given `name` attribute, it is treated as a\n    **boolean**, returning `true` if the checkbox is checked, `false` if\n    unchecked.\n  - if there's more than one checkbox with the same `name` attribute, they are\n    all treated collectively as a single form control, which returns the value\n    as an **array** containing all the values of the selected checkboxes in the\n    collection.\n- `\u003cinput type=\"radio\"\u003e` elements are all grouped by the `name` attribute, and\n  such a group treated as a single form control. This form control returns the\n  value as a **string** corresponding to the `value` attribute of the selected\n  radio button within the group.\n- `\u003cinput type=\"text\"\u003e` elements return the value as a **string**. This also\n  applies to `\u003cinput\u003e` elements having any other possible `type` attribute\n  that's not explicitly covered in different rules above (e.g. `search`,\n  `email`, `date`, `password`, `hidden`, etc.)\n- `\u003cselect\u003e` elements without the `multiple` attribute return the value as a\n  **string** corresponding to the `value` attribute of the selected `option`, or\n  `undefined` if there's no selected option.\n- `\u003cselect multiple\u003e` elements return the value as an **array** containing all\n  the values of the [selected options][].\n- `\u003ctextarea\u003e` elements return their value as a **string**. The value\n  corresponds to their node content.\n\nThe above rules make it easy, for instance, to switch from using a single select\ncontrol to using a group of radio buttons. Or to switch from a multi select\ncontrol, to using a group of checkboxes. The resulting set of form values used\nby this matcher to compare against would be the same.\n\n[selected options]:\n  https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions\n[form]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement\n[fieldset]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldSetElement\n[.elements]:\n  https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements\n\n#### Examples\n\n```html\n\u003cform data-testid=\"login-form\"\u003e\n  \u003cinput type=\"text\" name=\"username\" value=\"jane.doe\" /\u003e\n  \u003cinput type=\"password\" name=\"password\" value=\"12345678\" /\u003e\n  \u003cinput type=\"checkbox\" name=\"rememberMe\" checked /\u003e\n  \u003cbutton type=\"submit\"\u003eSign in\u003c/button\u003e\n\u003c/form\u003e\n```\n\n```javascript\nexpect(getByTestId('login-form')).to.have.formValues({\n  username: 'jane.doe',\n  rememberMe: true,\n})\n```\n\n### `.style`\n\nThis allows you to check if a certain element has some specific css properties\nwith specific values applied. It matches only if the element has _all_ the\nexpected properties applied, not just some of them.\n\n#### Examples\n\n```html\n\u003cbutton\n  data-testid=\"delete-button\"\n  style=\"display: none; background-color: red\"\n\u003e\n  Delete item\n\u003c/button\u003e\n```\n\n```javascript\nconst button = getByTestId('delete-button')\n\nexpect(button).to.have.style('display: none')\nexpect(button).to.have.style({display: 'none'})\nexpect(button).to.have.style(`\n  background-color: red;\n  display: none;\n`)\nexpect(button).to.have.style({\n  backgroundColor: 'red',\n  display: 'none',\n})\nexpect(button).not.to.have.style(`\n  background-color: blue;\n  display: none;\n`)\nexpect(button).not.to.have.style({\n  backgroundColor: 'blue',\n  display: 'none',\n})\n```\n\nThis also works with rules that are applied to the element via a class name for\nwhich some rules are defined in a stylesheet currently active in the document.\nThe usual rules of css precedence apply.\n\n\u003chr /\u003e\n\n### `.text`\n\nThis allows you to check whether the given node has a text content or not. This\nsupports elements, but also text nodes and fragments.\n\nEvery assertion done after this will be done on the textContent of the element\nbeing tested.\n\n#### Examples\n\n```html\n\u003cspan data-testid=\"text-content\"\u003eText Content\u003c/span\u003e\n```\n\n```javascript\nconst element = getByTestId('text-content')\n\nexpect(element).to.have.text.that.contains('Content')\nexpect(element).to.have.text.that.matches(/^Text Content$/) // to match the whole content\nexpect(element).to.have.text.that.matches(/content$/i) // to use case-insensitive match\nexpect(element).to.have.text.that.does.not.contain('content')\n```\n\n\u003chr /\u003e\n\n### `.value`\n\nThis allows you to check whether the given form element has the specified value.\nIt accepts `\u003cinput\u003e`, `\u003cselect\u003e` and `\u003ctextarea\u003e` elements with the exception of\n`\u003cinput type=\"checkbox\"\u003e` and `\u003cinput type=\"radio\"\u003e`, which can be meaningfully\nmatched only using [`.checked`](#checked) or\n[`.formValues`](#formvalues).\n\nEvery assertion done after this will be done on the value of the element being tested.\n\nFor all other form elements, the value is matched using the same algorithm as in\n[`.formValues`](#formvalues) does.\n\n#### Examples\n\n```html\n\u003cinput type=\"text\" value=\"text\" data-testid=\"input-text\" /\u003e\n\u003cinput type=\"number\" value=\"5\" data-testid=\"input-number\" /\u003e\n\u003cinput type=\"text\" data-testid=\"input-empty\" /\u003e\n\u003cselect multiple data-testid=\"select-number\"\u003e\n  \u003coption value=\"first\"\u003eFirst Value\u003c/option\u003e\n  \u003coption value=\"second\" selected\u003eSecond Value\u003c/option\u003e\n  \u003coption value=\"third\" selected\u003eThird Value\u003c/option\u003e\n\u003c/select\u003e\n```\n\n##### Using DOM Testing Library\n\n```javascript\nconst textInput = getByTestId('input-text')\nconst numberInput = getByTestId('input-number')\nconst emptyInput = getByTestId('input-empty')\nconst selectInput = getByTestId('select-number')\n\nexpect(textInput).to.have.value.that.equals('text')\nexpect(numberInput).to.have.value.that.equals(5)\nexpect(emptyInput).not.to.have.value\nexpect(selectInput).to.have.value.that.has.members(['second', 'third'])\n```\n\n\u003chr /\u003e\n\n### `.display`\n\nThis allows you to check whether the given form element has the specified\ndisplayed value (the one the end user will see) when used before `.value`.\nIt accepts `\u003cinput\u003e`, `\u003cselect\u003e` and `\u003ctextarea\u003e` elements with the exception\nof `\u003cinput type=\"checkbox\"\u003e` and `\u003cinput type=\"radio\"\u003e`, which can be\nmeaningfully matched only using [`.checked`](#checked) or\n[`.formValues`](#formvalues).\n\n#### Examples\n\n```html\n\u003clabel for=\"input-example\"\u003eFirst name\u003c/label\u003e\n\u003cinput type=\"text\" id=\"input-example\" value=\"Luca\" /\u003e\n\n\u003clabel for=\"textarea-example\"\u003eDescription\u003c/label\u003e\n\u003ctextarea id=\"textarea-example\"\u003eAn example description here.\u003c/textarea\u003e\n\n\u003clabel for=\"single-select-example\"\u003eFruit\u003c/label\u003e\n\u003cselect id=\"single-select-example\"\u003e\n  \u003coption value=\"\"\u003eSelect a fruit...\u003c/option\u003e\n  \u003coption value=\"banana\"\u003eBanana\u003c/option\u003e\n  \u003coption value=\"ananas\"\u003eAnanas\u003c/option\u003e\n  \u003coption value=\"avocado\"\u003eAvocado\u003c/option\u003e\n\u003c/select\u003e\n\n\u003clabel for=\"multiple-select-example\"\u003eFruits\u003c/label\u003e\n\u003cselect id=\"multiple-select-example\" multiple\u003e\n  \u003coption value=\"\"\u003eSelect a fruit...\u003c/option\u003e\n  \u003coption value=\"banana\" selected\u003eBanana\u003c/option\u003e\n  \u003coption value=\"ananas\"\u003eAnanas\u003c/option\u003e\n  \u003coption value=\"avocado\" selected\u003eAvocado\u003c/option\u003e\n\u003c/select\u003e\n```\n\n##### Using DOM Testing Library\n\n```javascript\nconst input = screen.getByLabelText('First name')\nconst textarea = screen.getByLabelText('Description')\nconst selectSingle = screen.getByLabelText('Fruit')\nconst selectMultiple = screen.getByLabelText('Fruits')\n\nexpect(input).to.have.display.value.that.equals('Luca')\nexpect(input).to.have.display.value.that.matches(/Luc/)\nexpect(textarea).to.have.display.value.that.equals('An example description here.')\nexpect(textarea).to.have.display.value.that.matches(/example/)\nexpect(selectSingle).to.have.display.value.that.equals('Select a fruit...')\nexpect(selectSingle).to.have.display.value.that.matches(/Select/)\nexpect(selectMultiple).to.have.display.value.that.matches(/Avocado/)\n    .and.contains('Banana')\n```\n\n\u003chr /\u003e\n\n### `.checked`\n\nThis allows you to check whether the given element is checked. It accepts an\n`input` of type `checkbox` or `radio` and elements with a `role` of `checkbox`,\n`radio` or `switch` with a valid `aria-checked` attribute of `\"true\"` or\n`\"false\"`.\n\n#### Examples\n\n```html\n\u003cinput type=\"checkbox\" checked data-testid=\"input-checkbox-checked\" /\u003e\n\u003cinput type=\"checkbox\" data-testid=\"input-checkbox-unchecked\" /\u003e\n\u003cdiv role=\"checkbox\" aria-checked=\"true\" data-testid=\"aria-checkbox-checked\" /\u003e\n\u003cdiv\n  role=\"checkbox\"\n  aria-checked=\"false\"\n  data-testid=\"aria-checkbox-unchecked\"\n/\u003e\n\n\u003cinput type=\"radio\" checked value=\"foo\" data-testid=\"input-radio-checked\" /\u003e\n\u003cinput type=\"radio\" value=\"foo\" data-testid=\"input-radio-unchecked\" /\u003e\n\u003cdiv role=\"radio\" aria-checked=\"true\" data-testid=\"aria-radio-checked\" /\u003e\n\u003cdiv role=\"radio\" aria-checked=\"false\" data-testid=\"aria-radio-unchecked\" /\u003e\n\u003cdiv role=\"switch\" aria-checked=\"true\" data-testid=\"aria-switch-checked\" /\u003e\n\u003cdiv role=\"switch\" aria-checked=\"false\" data-testid=\"aria-switch-unchecked\" /\u003e\n```\n\n```javascript\nconst inputCheckboxChecked = getByTestId('input-checkbox-checked')\nconst inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked')\nconst ariaCheckboxChecked = getByTestId('aria-checkbox-checked')\nconst ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked')\nexpect(inputCheckboxChecked).to.be.checked\nexpect(inputCheckboxUnchecked).not.to.be.checked\nexpect(ariaCheckboxChecked).to.be.checked\nexpect(ariaCheckboxUnchecked).not.to.be.checked\n\nconst inputRadioChecked = getByTestId('input-radio-checked')\nconst inputRadioUnchecked = getByTestId('input-radio-unchecked')\nconst ariaRadioChecked = getByTestId('aria-radio-checked')\nconst ariaRadioUnchecked = getByTestId('aria-radio-unchecked')\nexpect(inputRadioChecked).to.be.checked\nexpect(inputRadioUnchecked).not.to.be.checked\nexpect(ariaRadioChecked).to.be.checked\nexpect(ariaRadioUnchecked).not.to.be.checked\n\nconst ariaSwitchChecked = getByTestId('aria-switch-checked')\nconst ariaSwitchUnchecked = getByTestId('aria-switch-unchecked')\nexpect(ariaSwitchChecked).to.be.checked\nexpect(ariaSwitchUnchecked).not.to.be.checked\n```\n\n\u003chr /\u003e\n\n### `.partially`\n\nThis allows you to check whether the given element is partially checked when\nused before `.checked`. It accepts an `input` of type `checkbox` and elements\nwith a `role` of `checkbox` with a `aria-checked=\"mixed\"`, or `input` of type\n`checkbox` with `indeterminate` set to `true`\n\n#### Examples\n\n```html\n\u003cinput type=\"checkbox\" aria-checked=\"mixed\" data-testid=\"aria-checkbox-mixed\" /\u003e\n\u003cinput type=\"checkbox\" checked data-testid=\"input-checkbox-checked\" /\u003e\n\u003cinput type=\"checkbox\" data-testid=\"input-checkbox-unchecked\" /\u003e\n\u003cdiv role=\"checkbox\" aria-checked=\"true\" data-testid=\"aria-checkbox-checked\" /\u003e\n\u003cdiv\n  role=\"checkbox\"\n  aria-checked=\"false\"\n  data-testid=\"aria-checkbox-unchecked\"\n/\u003e\n\u003cinput type=\"checkbox\" data-testid=\"input-checkbox-indeterminate\" /\u003e\n```\n\n```javascript\nconst ariaCheckboxMixed = getByTestId('aria-checkbox-mixed')\nconst inputCheckboxChecked = getByTestId('input-checkbox-checked')\nconst inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked')\nconst ariaCheckboxChecked = getByTestId('aria-checkbox-checked')\nconst ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked')\nconst inputCheckboxIndeterminate = getByTestId('input-checkbox-indeterminate')\n\nexpect(ariaCheckboxMixed).to.be.partially.checked\nexpect(inputCheckboxChecked).not.to.be.partially.checked\nexpect(inputCheckboxUnchecked).not.to.be.partially.checked\nexpect(ariaCheckboxChecked).not.to.be.partially.checked\nexpect(ariaCheckboxUnchecked).not.to.be.partially.checked\n\ninputCheckboxIndeterminate.indeterminate = true\nexpect(inputCheckboxIndeterminate).to.be.partially.checked\n```\n\n\u003chr /\u003e\n\n### `.error`\n\nThis allows you to check whether the given element has an\n[ARIA error message](https://www.w3.org/TR/wai-aria/#aria-errormessage) or not.\n\nEvery assertion done after this will be done on the error message of the element\nbeing tested.\n\nUse the `aria-errormessage` attribute to reference another element that contains\ncustom error message text. Multiple ids is **NOT** allowed. Authors MUST use\n`aria-invalid` in conjunction with `aria-errormessage`. Learn more from\n[`aria-errormessage` spec](https://www.w3.org/TR/wai-aria/#aria-errormessage).\n\nWhitespace is normalized.\n\n#### Examples\n\n```html\n\u003clabel for=\"startTime\"\u003e Please enter a start time for the meeting: \u003c/label\u003e\n\u003cinput\n  id=\"startTime\"\n  type=\"text\"\n  aria-errormessage=\"msgID\"\n  aria-invalid=\"true\"\n  value=\"11:30 PM\"\n/\u003e\n\u003cspan id=\"msgID\" aria-live=\"assertive\" style=\"visibility:visible\"\u003e\n  Invalid time: the time must be between 9:00 AM and 5:00 PM\n\u003c/span\u003e\n```\n\n```javascript\nconst timeInput = getByLabel('startTime')\n\nexpect(timeInput).to.have.error(\n  'Invalid time: the time must be between 9:00 AM and 5:00 PM',\n)\nexpect(timeInput).to.have.error.that.matches(/invalid time/i) // to partially match\nexpect(timeInput).to.have.error.that.contains('Invalid time') // to partially match\nexpect(timeInput).to.have.error.that.does.not.contain('Pikachu!')\n```\n\n[chai]: https://www.chaijs.com\n[dom-testing-library]: https://github.com/testing-library/dom-testing-library\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpablo-abc%2Fchai-jsdom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpablo-abc%2Fchai-jsdom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpablo-abc%2Fchai-jsdom/lists"}