jest-dom/types/matchers-standalone.d.ts:9:3 - error TS2300: Duplicate identifier 'toHaveClass'.

[aliu-vmware]

• @testing-library/jest-dom version: 6.4.5
• node version: 20.12.0
• jest (or vitest) version: 29.7.0
• npm (or yarn) version: 10.5.0

Relevant code or config:

What you did:

Tried to start up a storybook using a default angular project generated via ng new and ng generate library

What happened:

ERROR in node_modules/@testing-library/jest-dom/types/matchers-standalone.d.ts:9:3 - error TS2300: Duplicate identifier 'toHaveClass'.

9   toHaveClass: (expected: any, ...rest: string[]) => MatcherReturnType
    ~~~~~~~~~~~

ERROR in node_modules/@testing-library/jest-dom/types/matchers-standalone.d.ts:10:3 - error TS2300: Duplicate identifier 'toHaveClass'.

10   toHaveClass: (
     ~~~~~~~~~~~

ERROR in node_modules/@testing-library/jest-dom/types/matchers-standalone.d.ts:10:3 - error TS2717: Subsequent property declarations must have the same type.  Property 'toHaveClass' must be of type '(expected: any, ...rest: string[]) => MatcherReturnType', but here has type '(expected: any, className: string, options?: { exact: boolean; } | undefined) => MatcherReturnType'.

10   toHaveClass: (
     ~~~~~~~~~~~

  node_modules/@testing-library/jest-dom/types/matchers-standalone.d.ts:9:3
    9   toHaveClass: (expected: any, ...rest: string[]) => MatcherReturnType
        ~~~~~~~~~~~
    'toHaveClass' was also declared here.

Reproduction:

https://www.typescriptlang.org/play/?ts=5.1.6#code/PTAEHUFMBsGMHsC2lQBd5oBYoCoE8AHSAZVgCcBLA1UABWgEM8BzM+AVwDsATAGiwoBnUENANQAd0gAjQRVSQAUCEmYKsTKGYUAbpGF4OY0BoadYKdJMoL+gzAzIoz3UNEiPOofEVKVqAHSKymAAmkYI7NCuqGqcANag8ABmIjQUXrFOKBJMggBcISGgoAC0oACCbvCwDKgU8JkY7p7ehCTkVDQS2E6gnPCxGcwmZqDSTgzxxWWVoASMFmgYkAAeRJTInN3ymj4d-jSCeNsMq-wuoPaOltigAKoASgAywhK7SbGQZIIz5VWCFzSeCrZagNYbChbHaxUDcCjJZLfSDbExIAgUdxkUBIursJzCFJtXydajBDIKMjJBhLACydQ030ekFQ+M4+1AAG9FCUCAxBAVxvB4C1ODzQMgBQxmJB8qAABQASlAAF4AHxXVCUTjMRQAX3J22+1KWAHk9GRoPAGNxINx6ahGT8ueL0AAJBh6ADCjAFcvlEMgsAU3DlZjw-ACUYJqDlgi1wwA2gBdZXq0AOp3M1lkdntV3wD3e32C+XikqB4N2sOcCPlkwlgByDGQcYTOt49fg1AanEEAH45Zy1jTY0KRR5OHrOyU0xrM71s2z9vqgA

Problem description:

matchers-standalone.d.ts seems to have an invalid syntax. See microsoft/TypeScript#4462 for a longer explanation.

Suggested solution:

interface OverloadedMatchers {
  toHaveClass(expected: any, ...rest: string[]) : MatcherReturnType
  toHaveClass(
    expected: any,
    className: string,
    options?: {exact: boolean},
  ) : MatcherReturnType
}

seems to work, and is probably what the original code intended (overloaded method signature). Note the change from arrow function to class method syntax.

[james-nash]

Encountered this exact same issue too.

FWIW, I've got @testing-library/jest-dom 6.4.6, which is being installed into my project via @storybook/test 8.1.10. I'm working around it for now by setting skibLibCheck to true in my tsconfig.json, but would prefer not to have to do that.

[gnapse]

Suggested solution:

Would you mind opening a PR to introduce that change?

[tonyhallett]

gnapse #611

[tai2]

It was introduced at v6.2.1

  "resolutions": {
    "@testing-library/jest-dom": "6.2.0"
  },

This could work around the issue until it's fixed.