Vitest typings for jest-dom are broken in 6.6.2 when using "globalMode"

InfiniteXyy commented 1 month ago

@testing-library/jest-dom version: 6.6.2
node version: 20.10.0
vitest version: 2.1.3
npm (or yarn) version: 10.2.3

Relevant code or config / Reproduction:

minimun reproduce demo: https://stackblitz.com/edit/vitejs-vite-ydhnrx?file=src%2FApp.test.tsx

What you did:

Bootstramp a starter repo with vitest & testing-library (vitest should be in global mode, and there is no import xxx from 'vitest' in the whole project)

Problem description / What happened:

The toHaveTextContent should be a matcher of expect, and also is working in runtime, but a type error is thrown.

You can run npm run build to see the error

Suggested solution:

According to the documents of vitest, to extend a matcher, we have to import the "vitest" module otherwise the interface merge might not work as expected So we could add this line of code to top of the definition

import "vitest"

You can try adding this in the stackbliz repo's dependency (jumping to the source code by ctrl + click the import) and run npm run build again, the type error should be fixed

mrmckeb commented 1 month ago

This was likely introduced by the change in https://github.com/testing-library/jest-dom/pull/636.

LucidityDesign commented 1 month ago

Adding "types": ["@testing-library/jest-dom"] to tsconfig solves this issue for me.

InfiniteXyy commented 1 month ago

Adding "types": ["@testing-library/jest-dom"] to tsconfig solves this issue for me.

Yes, I think it's working, but in the source code of "@testing-library/jest-dom" it's referencing jest, which is not so correct.

/// <reference types="jest" />

If you happen to have @types/jest installed in project, (for example in a monorepo and jest is used in one project, vitest for another.) it will make the expect become jest.Expect,

ChaseMarcum commented 1 month ago

I am running into the same issue with toHaveNoViolations matcher for vitest-axe.

@testing-library/jest-dom version: 6.6.2
node version: 20.17.0
vitest version: 2.0.0
vitest-axe version: 0.1.0
npm version: 10.8.2

Relevant code or config:

// vitest-setup.js
import * as matchers from "vitest-axe/matchers";
import { expect } from "vitest";
expect.extend(matchers);

// global.d.ts
import "vitest";
import type { AxeMatchers } from "vitest-axe/matchers";

declare module "vitest" {
    export interface Assertion extends AxeMatchers {}
    export interface AsymmetricMatchersContaining extends AxeMatchers {}
}

What you did:

I upgraded @testing-library/jest-dom to version 6.6.2 in a project using Vitest and Vitest-Axe for accessibility testing. I followed the documented method of extending matchers in Vitest and Vitest-Axe, as shown above. After the upgrade, I encountered type errors during the build process, specifically regarding the toHaveNoViolations matcher from vitest-axe.

What happened:

While tests ran successfully, during the build, TypeScript reported the following type errors:

TS2339: Property 'toHaveNoViolations' does not exist on type 'Assertion<AxeResults>'.

This error occurred across multiple test files where the toHaveNoViolations matcher was used.

Reproduction:

Use Vitest and Vitest-Axe for accessibility tests.
Add the matcher expect(await axe(container)).toHaveNoViolations(); in any test.
Upgrade @testing-library/jest-dom to version 6.6.2.
Run npm run build to see the type error.

Problem description:

After upgrading to @testing-library/jest-dom version 6.6.2, TypeScript is unable to recognize the toHaveNoViolations matcher provided by vitest-axe during the build process. This is likely due to a mismatch between the TypeScript types for jest-dom and custom matchers added by vitest-axe. The issue prevents builds from completing successfully, despite tests passing.

testing-library / jest-dom