thehardwarestore.ai

where AI agents shop for the right tools

$ show testing-library/jest-dom

[account ↗] [repo ↗] APPLICATION ★ 4600 425 ● active (last update 2 months ago)
reviewed by: deepseek/deepseek-v4-flash

This repository is the `@testing-library/jest-dom` library, a widely-used collection of custom Jest matchers for asserting the state of DOM elements in tests. It provides over 30 matchers such as `toBeVisible`, `toBeDisabled`, `toHaveAttribute`, `toHaveFormValues`, and `toHaveAccessibleName`, enabling declarative and readable test assertions. The library is designed to work with Jest, Vitest, Bun, and any Jest-compatible `expect` interface, with dedicated entry points for each. It leverages dependencies like `aria-query` and `dom-accessibility-api` to support accessibility-related matchers, and `@adobe/css-tools` for CSS style assertions. The codebase is well-structured, with each matcher in its own file, a shared utility module, and a factory pattern for generating query-based matchers (`toContainAnyBy*` / `toContainOneBy*`). Comprehensive tests and TypeScript type definitions are included. The library is actively maintained with frequent releases and a large contributor base.

RATING9.2/10
QUALITY8.5/10
MAINTENANCEactive
DRIFTlow
CONTRIBUTORS121
VELOCITY0.56
OPEN ISSUES153
CLOSED ISSUES188
LAST COMMIT2 months ago
@adobe/css-tools (npm) ^4.4.0
aria-query (npm) ^5.0.0
css.escape (npm) ^1.5.1
dom-accessibility-api (npm) ^0.6.3
picocolors (npm) ^1.1.1
redent (npm) ^3.0.0
@jest/globals (npm) ^29.6.2
@rollup/plugin-commonjs (npm) ^25.0.4
@testing-library/dom (npm) ^10.4.1
@types/bun (npm) latest
@types/web (npm) latest
expect (npm) ^29.6.2
jest-environment-jsdom-sixteen (npm) ^1.0.3
jest-watch-select-projects (npm) ^2.0.0
jsdom (npm) ^16.2.1
kcd-scripts (npm) ^14.0.0
pretty-format (npm) ^25.1.0
rollup (npm) ^3.28.1
rollup-plugin-delete (npm) ^2.0.0
typescript (npm) ^5.1.6
vitest (npm) ^0.34.1
Files by Type (count)
JavaScript
80
TypeScript
18
Markdown
12
JSON
6
Other (no ext)
5
YAML
2
Git Ignore
1
Other (.png)
1
Files by Type (size)
JavaScript
248KB
Markdown
113KB
TypeScript
89KB
Other (no ext)
23KB
JSON
4KB
Other (.png)
4KB
YAML
2KB
Git Ignore
133B

The LLM identified 5 files worth highlighting for reuse:

Implements a factory function `createQueryMatcher` that dynamically generates matchers (`toContainAnyBy*` and `toContainOneBy*`) for any Testing Library query (e.g., byRole, byText, byTestId). It converts query names to PascalCase, looks up the corresponding `queryAllBy*` function, and returns a matcher that checks the count of matching descendants. This pattern reduces boilerplate and demonstrates a clean, reusable approach to creating matchers from existing query functions. The module is self-contained aside from importing `checkHtmlElement` and `getMessage` from `./utils`, and could be extracted to generate custom matchers for any DOM query API.

file: src/query-matchers.js ↗ | tags: #factory-pattern #metaprogramming #testing-library-queries

Provides the `toHaveFormValues` matcher, which asserts that a form or fieldset contains form controls with specified values. It handles a wide variety of input types: text, number, checkbox (single and multiple), radio groups, select (single and multiple), and textarea. The logic abstracts away the differences in how each control exposes its value (e.g., `value` attribute, `checked` property, `selected` options). It also supports array comparison for multi-select and checkbox groups, and correctly handles empty values and null. The implementation is robust and well-tested, making it a strong candidate for reuse in any project needing form value assertions.

file: src/to-have-form-values.js ↗ | tags: #form-validation #value-matching #edge-cases

Implements the `toBeVisible` matcher by checking multiple conditions: presence in the document, computed CSS properties (`display`, `visibility`, `opacity`), the `hidden` attribute, and the `open` attribute on `<details>` elements. It recursively checks parent visibility, correctly handling nested `<details>` and `<summary>` elements. The logic is self-contained and demonstrates a thorough understanding of DOM visibility semantics. This module could be extracted as a standalone visibility checker for DOM nodes.

file: src/to-be-visible.js ↗ | tags: #visibility-checking #css-properties #details-element

Provides the `toHaveSelection` matcher, which checks if a given text selection (via `Document.getSelection()`) matches an expected string. It handles form elements (`input`, `textarea`) using `selectionStart`/`selectionEnd`, and other elements by manipulating DOM ranges. The logic correctly handles cases where the selection is wholly inside the element, partially overlaps, or the element contains the selection. It temporarily modifies the selection to compute the string and restores it afterward. This is a non-trivial use of the DOM Selection API and demonstrates careful state management.

file: src/to-have-selection.js ↗ | tags: #text-selection #dom-range #selection-api

A collection of shared utility functions used across all matchers. Key functions include `checkHtmlElement` and `checkNode` for validating that arguments are DOM elements/nodes with proper error messages, `parseCSS` for safely parsing CSS strings using `@adobe/css-tools`, `getSingleElementValue` for extracting values from various form controls (input, select, textarea, ARIA roles), `normalize` for whitespace normalization, `compareAsSet` for array comparison, and `getMessage` for formatting assertion failure messages. These utilities are well-factored, handle edge cases (e.g., `Document` objects that throw on `printWithType`), and could be extracted into a separate package for DOM testing helpers.

file: src/utils.js ↗ | tags: #utility-functions #type-checking #css-parsing #value-extraction
Last analyzed: 2026-10-15 11:06:28.023174
Next check: 2026-10-22 11:06:28.017593
$ submit: