vitest-dom
Custom Vitest matchers to test the state of the DOM
This library is a fork of @testing-library/jest-dom
. It shares that library's implementation and API. It is intended to make it easier to include its matchers without clashes between Vitest and Jest's environment or types.
See the README
for the original package for usage details.
Installation
This module should be installed as one of your project's devDependencies
:
# with npm
npm install --save-dev vitest-dom
# yarn
yarn add --dev vitest-dom
# pnpm
pnpm add --dev vitest-dom
Usage
Import the matchers from vitest-dom/matchers
once (perferably in your tests setup file), then pass them to Vitest's expect.extend
method:
// vitest-setup.js
import * as matchers from "vitest-dom/matchers";
import { expect } from "vitest";
expect.extend(matchers);
// In vitest.config.js, add the following
export default defineConfig({
test: {
setupFiles: ["vitest-setup.js"],
},
});
With TypeScript
If you're using TypeScript, make sure your setup file is a .ts
and not a .js
to include the necessary types. Importing from vitest-dom/extend-expect
will add the matchers to Vitest's expect
types.
// vitest-setup.ts
import "vitest-dom/extend-expect";
You will also need to include your setup file in your tsconfig.json
if you haven't already:
// In tsconfig.json
"include": [
// ...
"./vitest-setup.ts"
],