skills.rest
TitoPrausee
TitoPrauseeCOMMUNITY
Explore all skills by this author →
GitHub

jest-setup-dom-matchers

Move @testing-library/jest-dom to setupFilesAfterEnv to fix Jest DOM matchers.

Updated Jul 7, 2026
Search Tags:#jest#testing-library#matchers#jest-dom#setupfiles#setupfilesafterenv
One-click install
npx skills add https://github.com/TitoPrausee/nexus-toti --skill jest-setup-dom-matchers
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jest-setup-dom-matchers
Source: https://github.com/TitoPrausee/nexus-toti/tree/main/data/skills/software-development/jest-setup-dom-matchers
Command: npx skills add https://github.com/TitoPrausee/nexus-toti --skill jest-setup-dom-matchers

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill fixes the common Jest configuration mistake where @testing-library/jest-dom is loaded too early, causing custom matchers like toHaveAttribute, toHaveClass, and toHaveStyle to fail at runtime.

Core Features & Use Cases

  • Root Cause Diagnosis: Identifies when Jest matchers are missing because setup code ran before expect was initialized.
  • Correct Setup Separation: Recommends splitting pre-framework mocks and post-framework matcher registration into different setup files.
  • Practical Verification: Helps confirm the fix by running a test that uses jest-dom matchers after the config change.
  • Use Case: A React project has passing installs but failing tests with “is not a function” errors for DOM matchers; this Skill guides the exact configuration correction.

Quick Start

Update your Jest configuration so that pre-framework mocks stay in setupFiles and @testing-library/jest-dom is loaded from setupFilesAfterEnv.

Frequently Asked Questions about jest-setup-dom-matchers

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why are my Jest DOM matchers like toHaveAttribute failing with is not a function errors?▼

Jest DOM matchers fail because @testing-library/jest-dom is loaded too early, before the test framework initializes. You must move jest-dom into setupFilesAfterEnv so expect is ready before matchers register.

How do I separate setupFiles and setupFilesAfterEnv for Jest DOM testing?▼

Keep pre-framework environment mocks like matchMedia in setupFiles and load @testing-library/jest-dom from setupFilesAfterEnv. This separation ensures matchers register only after the expect framework initializes.

What causes custom Jest matchers to be missing at runtime in React projects?▼

Custom Jest matchers are missing when setup code runs before the expect framework is initialized. Loading @testing-library/jest-dom in setupFiles instead of setupFilesAfterEnv prevents matchers like toHaveClass from attaching properly.

Do I need setupFilesAfterEnv to use @testing-library/jest-dom matchers?▼

Yes, you need setupFilesAfterEnv to load @testing-library/jest-dom because it requires the expect framework to be initialized first. Using setupFiles runs code before the framework loads, causing matchers to fail.

How do I verify my Jest DOM matchers configuration is fixed?▼

Verify the Jest DOM matchers fix by running a test that uses matchers like toHaveStyle after moving @testing-library/jest-dom to setupFilesAfterEnv. The test should pass without throwing is not a function errors.

Related Skills

Explore More Software Engineering Skills→
carayacaraya
1

typescript-testing

Configure type-safe tests and validate coverage for TypeScript projects using Jest, Vitest, or Mocha.

Community
Intermediate
matteocervellimatteocervelli
25

unit-test-writer

Generate pytest and Jest unit tests with AAA structure and coverage benchmarks.

Community
Basic
mgd34msumgd34msu
4

testing-library

Test UI components across React, Vue, and Svelte with Testing Library utilities.

Community
Intermediate
trystan2ktrystan2k
1

vitest

Configure Vitest for JavaScript and TypeScript projects with Jest-compatible APIs.

Community
Intermediate