re-configure tests

README.md

@@ -36,16 +36,18 @@ pnpm add --dev vitest-dom
 
 ## Usage
 
-Import `vitest-dom` once (for instance in your [tests setup file][]) and you're
-good to go:
+Import the matchers from `vitest-dom/matchers` once (perferably in your [tests
+setup file][]), then pass them to Vitest's `expect.extend` method:
 
 [tests setup file]: https://vitest.dev/config/#setupfiles
 
 ```javascript
-// In your own vitest-setup.js (or any other name)
-import "vitest-dom/extend-expect";
+// vitest-setup.js
+import * as matchers from "vitest-dom/matchers";
+import { expect } from "vitest";
+expect.extend(matchers);
 
-// In vitest.config.js add (if you haven't already)
+// In vitest.config.js, add the following
 export default defineConfig({
   test: {
     setupFiles: ["vitest-setup.js"],
@@ -56,7 +58,13 @@ export default defineConfig({
 ### With TypeScript
 
 If you're using TypeScript, make sure your setup file is a `.ts` and not a `.js`
-to include the necessary types.
+to include the necessary types. Importing from `vitest-dom/extend-expect` will
+add the matchers to Vitest's `expect` types.
+
+```typescript
+// 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:

package.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "test:dom": "vitest --config vitest.config.dom.js",
+    "test:dom": "vitest --config vitest.config.dom.ts",
     "test:node": "vitest --config vitest.config.node.js",
     "test": "run-p test:*",
     "lint": "eslint .",

test/setupTests.ts

@@ -0,0 +1,7 @@
+import { expect } from "vitest";
+import { plugins } from "pretty-format";
+import * as matchers from "../src/matchers";
+import "../src/extend-expect";
+
+expect.extend(matchers);
+expect.addSnapshotSerializer(plugins.ConvertAnsi as any);

vitest.config.dom.js → vitest.config.dom.ts

@@ -4,7 +4,7 @@ export default defineConfig({
   plugins: [],
   test: {
     environment: "jsdom",
-    setupFiles: ["test/setupTests.js"],
+    setupFiles: ["test/setupTests.ts"],
     watch: false,
     coverage: {
       include: ["**/__tests__/**/*.{ts,js}"],

vitest.config.node.js

@@ -4,7 +4,7 @@ export default defineConfig({
   plugins: [],
   test: {
     environment: "node",
-    setupFiles: ["test/setupTests.js"],
+    setupFiles: ["test/setupTests.ts"],
     watch: false,
     coverage: {
       include: ["**/__tests__/**/*.{ts,js}"],