The @dom-assertions/chai-dom package provides custom Chai assertions for writing more declarative, readable, and maintainable tests.

Installation

First, install the @dom-assertions/chai-dom package.

npm install --save-dev @dom-assertions/chai-dom

yarn add --dev @dom-assertions/chai-dom

pnpm add --save-dev @dom-assertions/chai-dom

Then:

import ChaiDom from '@dom-assertions/chai-dom'

chai.use(ChaiDom)

Assertions

be.invalid

Asserts that the given element is invalid.

Example

<div>
  <label for="username">Username</label>
  <input id="username" type="text" aria-invalid="true" />
</div>

expect(username).to.be.invalid

be.required

Asserts that the given element is required.

Example

<div>
  <label for="username">Username</label>
  <input id="username" type="text" required />
</div>

expect(username).to.be.required

be.valid

Asserts that the given element is valid.

Example

<div>
  <label for="username">Username</label>
  <input id="username" type="text" />
</div>

expect(username).to.be.valid

have.description

Asserts that the given element has the expected accessible description.

Example

<button aria-describedby="trash-desc">Move to trash</button>
<p id="trash-desc">
  Items in the trash will be permanently removed after 30 days.
</p>

expect(button).to.have.description()
expect(button).to.have.description(
  'Items in the trash will be permanently removed after 30 days.',
)

have.errorMessage

Asserts that the given element has the expected ARIA error message. Please note that the element should indicate an error state using aria-invalid set to true.

Example

<label for="email">Email</label>
<input
  type="email"
  name="email"
  id="email"
  aria-invalid="true"
  aria-errormessage="error-message"
/>
<span id="error-message">Enter a valid email address</span>

expect(email).to.have.errorMessage()
expect(email).to.have.errorMessage('Enter a valid email address')

have.name

Asserts that the given element has the expected accessible name.

Example

<span
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="label"
/>
<span id="label">I agree to the Terms and Conditions.</span>

expect(checkbox).to.have.name()
expect(checkbox).to.have.name('I agree to the Terms and Conditions.')