Export Vitest extend-expect

[AndrewLeedham]

Describe the feature you'd like:

I would like to use jest-dom in Vitest.

Suggested implementation:

Since both Jest and Vitest use the same style of matchers, and have very similiar APIs, perhaps jest-dom can export a secondary entry point for Vitest, or make the matchers export a first-class API.

Describe alternatives you've considered:

I can manually add the matchers in a setup file using:

import { expect } from 'vitest';
import * as matchers from '@testing-library/jest-dom/dist/matchers';

expect.extend(matchers);

However, I am reaching into the dist folder which is not a public API, also I am using TypeScript and having to setup the types myself, rather than using @types/jest-dom.

Teachability, Documentation, Adoption, Migration Strategy:

This would just be an additional entry file just for Vitest, so should not change the functionality of jest-dom.

[gnapse]

I suspect that you can already do this (the same as above, but without the /dist part):

import { expect } from 'vitest';
import * as matchers from '@testing-library/jest-dom/matchers';

expect.extend(matchers);

Can you confirm? I tried it myself, and it worked, but it would not hurt to make sure.

However, the types part is not solved. But that requires a PR to https://github.com/DefinitelyTyped/DefinitelyTyped. It'd be great if you'd contribute that for us. Can you?

[AndrewLeedham]

@gnapse Ah yes I missed that file. Although because of the CJS default export, it only works as

import matchers from '@testing-library/jest-dom/matchers';

But that is fine. I'll put a PR into DefinitelyTyped

[gnapse]

We're introducing EMS exports soon (#438). Does that help?

[AndrewLeedham]

@gnapse ESM exports will be great. Will probably involve reworking the @types package again. But for now I have added the matchers declaration: DefinitelyTyped/DefinitelyTyped#59030

[IanVS]

Will probably involve reworking the @types package again

Just curious, why is that? I'm definitely open to suggestions on the ESM PR to avoid as much churn as possible.

[AndrewLeedham]

Was thinking it would need something like this: DefinitelyTyped/DefinitelyTyped#57195 but could be wrong.

[hornta]

@AndrewLeedham Did you solve your problem? This is blocking me from using Vitest with testing-library. The above solutions only work when vitest is configured for globals.

[AndrewLeedham]

Hi @hornta. My Definitely Typed PR landed so you should be able to do this:

// vitest-setup.ts
import { vi } from 'vitest';
import matchers, {
  TestingLibraryMatchers,
} from '@testing-library/jest-dom/matchers';

declare global {
  namespace Vi {
    interface JestAssertion<T = any>
      extends jest.Matchers<void, T>,
        TestingLibraryMatchers<T, void> {}
  }
}

expect.extend(matchers);

[kedar-s]

@AndrewLeedham Tried to use your exact same solution but I always end up with weird type errors

// vitest-setup.ts
import { vi } from 'vitest';
import matchers, {
  TestingLibraryMatchers,
} from '@testing-library/jest-dom/matchers';

declare global {
  namespace Vi {
    interface JestAssertion<T = any>
      extends jest.Matchers<void, T>,
        TestingLibraryMatchers<T, void> {}
  }
}

expect.extend(matchers);

Generic type 'Matchers<R, T, _R, _T>' requires between 3 and 4 type arguments.ts(2707)

I can see that the interface Matchers only takes 2 type arguments.

interface Matchers<R = void, T = {}>

I'd appreciate any ideas on how to approach this problem.
Thanks!

[paulcwatts]

For those coming here after updating to vitest >= 0.31.0, the above workaround no longer works because the assertions package location changed (https://github.com/vitest-dev/vitest/releases/tag/v0.31.0)

The following works for me:

// vitest-setup.ts
import type { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";
import matchers from "@testing-library/jest-dom/matchers";
import { expect } from "vitest";

declare module "vitest" {
  interface Assertion<T = any>
    extends jest.Matchers<void, T>,
      TestingLibraryMatchers<T, void> {}
}

expect.extend(matchers);

[remy90]

I'm still getting the following error:

Error: Missing "./extend-expect" specifier in "@testing-library/jest-dom" package
❯ e node_modules/vite/dist/node/chunks/dep-df561101.js:21420:25
❯ n node_modules/vite/dist/node/chunks/dep-df561101.js:21420:627
❯ o node_modules/vite/dist/node/chunks/dep-df561101.js:21420:1297
❯ resolveExportsOrImports node_modules/vite/dist/node/chunks/dep-df561101.js:28712:20
❯ resolveDeepImport node_modules/vite/dist/node/chunks/dep-df561101.js:28731:31
❯ tryNodeResolve node_modules/vite/dist/node/chunks/dep-df561101.js:28419:20
❯ Context.resolveId node_modules/vite/dist/node/chunks/dep-df561101.js:28180:28
❯ Object.resolveId node_modules/vite/dist/node/chunks/dep-df561101.js:44207:64
❯ TransformContext.resolve node_modules/vite/dist/node/chunks/dep-df561101.js:43923:23

versions:
"vitest": "^0.34.3",
"@testing-library/jest-dom": "^6.1.2",
"@testing-library/react": "^14.0.0",

package manager: yarn 1.22.19
node: 18.16.1

What I've tried:

import '@testing-library/jest-dom'
import '@testing-library/jest-dom/extend-expect'
import matchers, { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers'
import { afterEach, beforeEach, expect, vi } from 'vitest'

declare module 'vitest' {
  interface Assertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {}
}

expect.extend(matchers)

[macmillan78]

@remy90 Just ran into the same problem. importing with import * as matchers from '@testing-library/jest-dom/matchers' works for me. Could you confirm?

[IanVS]

extend-expect was removed in the latest breaking change, and the solution from @macmillan78 is the correct approach.

[IanVS]

For vitest, you can also follow the steps in the readme: https://github.com/testing-library/jest-dom#with-vitest

[simonrevill]

For me, this worked and I didn't need to declare the types:

// vite.config.ts

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./setupTests.ts"],
    css: true,
  },
});

// setupTests.ts
import "@testing-library/jest-dom/vitest";

// tsconfig.json
{
  "compilerOptions": {
   // ..
    "types": ["vitest/globals"],
  },
  "include": ["src", "setupTests.ts"],
}

[bradleyball]

I'm not able to get any of the above solutions to work when the jest-dom package is version 6 or greater

[IanVS]

@bradleyball please open a new issue with all the details of the problem you're having.

[mibcadet]

for me nearly all worked but IDE couldnt see those matchers types, this was solution I used to have no TS issues:
#624