Property 'toHaveTextContent' does not exist on type 'Matchers<void> & ...' (and any other matcher from library)

[alexamy]

• react-native or expo: expo
• @testing-library/react-native version: 11.5.0
• jest-preset: jest-expo
• react-native version: 0.70.5
• node version: v16.17.1
• @testing-library/jest-native version: 5.3.3
• jest version: 29.3.0

Relevant code or config:

expect(await screen.findByRole('alert')).toHaveTextContent(
  'Incorrect username or password'
);

What you did:

Just using any matcher from jest-native.

What happened:

Typescript complains for missed types. For example, for toHaveTextContent matcher:

Property 'toHaveTextContent' does not exist on type 'Matchers<void> & SnapshotMatchers<void, ReactTestInstance> &
Inverse<JestMatchers<void, ReactTestInstance>> & PromiseMatchers<ReactTestInstance>'.ts(2339)

Reproduction:

https://github.com/alexamy/react-native-testing-library-missing-matchers
or the same code in zip archive:
react-native-testing-library-missing-matchers-45392ed44fe4fa3de64723609f6a0f74227188a4.zip

Problem description:

There is no way to use custom matchers in typescript tests for obvious reason. This problem can be 'avoided' by skipping matcher typecheck with @ts-ignore or optionally skipping test typecheck altogether, but it is not really a solution.

Suggested solution:

Modify types in @testing-library/jest-native/extend-expect.d.ts to proper extend the matchers interface.

Btw, there is also import problem on line 3.

Matchers interface from Jest:

I've tried to make declare global in project with extended jest' Matchers interface, but it seems that something is missed, I didn't get any working result from my tries, this interface seems to be unchanged.

Can you help us fix this issue by submitting a pull request?

I can make a Pull Request with solution for this problem if someone can point me how to properly modify definition file.

[worldlee78]

Yeah, I am also experiencing this issue. Would be willing to help solve it.

[roni-castro]

@alexamy Did you try installing @types/jest instead of using "@jest/globals"?

It seems there are some conflicts with the @jest/globals

Screen.Recording.2022-12-16.at.00.33.07.mov

[worldlee78]

I installed the @types/jest at the same time as I used @jest/globals but no dice. Are you suggesting that @types/jest would work where the recommended globals would not? I did have this working prior to switching but it feels like a step backwards to go from explicitly calling jest methods to going back to globals. I should mention that even when I try getting the matchers directly (instead of importing them all at once during setup) it doesn’t see the typescript there either, so you might be right (though i really don’t want to have to undo all the work of explicitly using the globals).

…

On Thu, Dec 15, 2022 at 7:34 PM Roni Castro ***@***.***> wrote: @alexamy <https://github.com/alexamy> Did you try installing @types/jest instead of using ***@***.***/globals"? https://user-images.githubusercontent.com/24610813/208015970-3059ca21-444e-4109-8b96-bcf044af0bed.mov — Reply to this email directly, view it on GitHub <#136 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHTRV3CPWTICBEAYTJROIDWNPPLLANCNFSM6AAAAAATAHBGOU> . You are receiving this because you commented.Message ID: ***@***.***>

[roni-castro]

I installed the @types/jest at the same time as I used @jest/globals but no dice. Are you suggesting that @types/jest would work where the recommended globals would not? I did have this working prior to switching but it feels like a step backwards to go from explicitly calling jest methods to going back to globals. I should mention that even when I try getting the matchers directly (instead of importing them all at once during setup) it doesn’t see the typescript there either, so you might be right (though i really don’t want to have to undo all the work of explicitly using the globals).
…
On Thu, Dec 15, 2022 at 7:34 PM Roni Castro @.> wrote: @alexamy https://github.com/alexamy Did you try installing @types/jest instead of using @./globals"? https://user-images.githubusercontent.com/24610813/208015970-3059ca21-444e-4109-8b96-bcf044af0bed.mov — Reply to this email directly, view it on GitHub <#136 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHTRV3CPWTICBEAYTJROIDWNPPLLANCNFSM6AAAAAATAHBGOU . You are receiving this because you commented.Message ID: @.***>

@worldlee78 It seems the declarations of this file are ignored when you import using @jest/globals, maybe because the global comes from jest.Expect and the @jest/globals from JestExpect

Screen.Recording.2022-12-16.at.01.23.38.mov

[alexamy]

@roni-castro Thanks, I will try to use @types/jest to find the solution.

But I think that using implicit globals is a bad pratice because, according to Jest docs:

Getting started with Typescript:

@types/jest is a third party library maintained at DefinitelyTyped, 
hence the latest Jest features or versions may not be covered yet.

API:

The TypeScript examples from this page will only work as documented if you explicitly import Jest APIs

[alexamy]

UPD: After reloading editor, the error goes away.

@roni-castro With @types/jest: 29.2.4 I got slightly different error:

Property 'toHaveTextContent' does not exist on type 'JestMatchers<ReactTestInstance>'.

expect is coming from jest.Expect:

I've made a new branch with @types/jest:
https://github.com/alexamy/react-native-testing-library-missing-matchers/blob/add-global-jest-types/__tests__/errors.test.tsx

UPD: After reloading editor, the error goes away.

[mdjastrzebski]

Maybe we could have a look at some other 3rd party Jest marchers package written in TS and see how they are solving the issue.

[alexamy]

It looks like jest-dom has the same problem:

// Type definitions for @testing-library/jest-dom 5.14
// Project: https://github.com/testing-library/jest-dom
// Definitions by: Ernesto García <https://github.com/gnapse>
//                 John Gozde <https://github.com/jgoz>
//                 Seth Macpherson <https://github.com/smacpherson64>
//                 Andrew Leedham <https://github.com/AndrewLeedham>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// Minimum TypeScript Version: 4.3

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

import { TestingLibraryMatchers } from './matchers';

declare global {
    namespace jest {
        interface Matchers<R = void, T = {}> extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
    }
}

[alexamy]

So, the solution to the missing type definitions for matchers is to use @types/jest and dont use jest explicit globals import from @jest/globals at all.

Similar issue in jest-dom: testing-library/jest-dom#426

Anyone feel free to investigate further, but for now I close this issue.

[alexamy]

Following this comment (thanks @yordis), this may lead to the solution:

declare module '@jest/expect' {
  interface Matchers<R extends void | Promise<void>> {
    toBeDisabled(): R;
    toBeEmptyElement(): R;
    toBeEnabled(): R;
    toBeVisible(): R;
    toContainElement(element: ReactTestInstance | null): R;
    toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R;
    toHaveProp(attr: string, value?: unknown): R;
    toHaveStyle(style: StyleProp<ViewStyle | TextStyle | ImageStyle>): R;
    toHaveAccessibilityState(state: AccessibilityState): R;
    toHaveAccessibilityValue(state: AccessibilityValueMatcher): R;

    /** @deprecated This function has been renamed to `toBeEmptyElement`. */
    toBeEmpty(): R;
  }
}

But it seems that this solution redefines already existing matchers from 'jest':

Made a new branch in repro repo with additional definition file:
https://github.com/alexamy/react-native-testing-library-missing-matchers/blob/fix-jest-native-typings/__tests__/globals.d.ts

[mdjastrzebski]

@alexamy shoulden't TS theoretically merge the interfaces? https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-namespaces

[alexamy]

@mdjastrzebski Yes, but I think the reason for overwritting here is declare module. Thanks for the link to ts docs, it'll help to clear the issue.

[alexamy]

@mdjastrzebski Thanks for a docs! Module augmentaion is the answer.
I think that this is the solution:

import { Matchers } from '@jest/expect';

declare module '@jest/expect' {
  interface Matchers<R extends void | Promise<void>> {
    toBeDisabled(): R;
    toBeEmptyElement(): R;
    toBeEnabled(): R;
    toBeVisible(): R;
    toContainElement(element: ReactTestInstance | null): R;
    toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R;
    toHaveProp(attr: string, value?: unknown): R;
    toHaveStyle(style: StyleProp<ViewStyle | TextStyle | ImageStyle>): R;
    toHaveAccessibilityState(state: AccessibilityState): R;
    toHaveAccessibilityValue(state: AccessibilityValueMatcher): R;

    /** @deprecated This function has been renamed to `toBeEmptyElement`. */
    toBeEmpty(): R;
  }
}

[alexamy]

And, matchers interface extension for @types/jest and @jest/globals simultaneously:

import { Matchers } from '@jest/expect';

interface JestNativeMatchers<R extends void | Promise<void>> {
  toBeDisabled(): R;
  toBeEmptyElement(): R;
  toBeEnabled(): R;
  toBeVisible(): R;
  toContainElement(element: ReactTestInstance | null): R;
  toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R;
  toHaveProp(attr: string, value?: unknown): R;
  toHaveStyle(style: StyleProp<ViewStyle | TextStyle | ImageStyle>): R;
  toHaveAccessibilityState(state: AccessibilityState): R;
  toHaveAccessibilityValue(state: AccessibilityValueMatcher): R;

  /** @deprecated This function has been renamed to `toBeEmptyElement`. */
  toBeEmpty(): R;
}

// implicit jest globals, types coming from `@types/jest`
declare global {
  namespace jest {
    interface Matchers<R, T> extends JestNativeMatchers<R> {}
  }
}

// explicit jest globals, types coming from `@jest/globals`
declare module '@jest/expect' {
  interface Matchers<R extends void | Promise<void>> extends JestNativeMatchers<R> {}
}

Code example here.
You need to comment/delete interface extension in /node_modules/@testing-library/jest-native/extend-expect.d.ts to test the @types/jest case.

[mathewvaughan]

And, matchers interface extension for @types/jest and @jest/globals simultaneously:

import { Matchers } from '@jest/expect';

interface JestNativeMatchers<R extends void | Promise<void>> {
  toBeDisabled(): R;
  toBeEmptyElement(): R;
  toBeEnabled(): R;
  toBeVisible(): R;
  toContainElement(element: ReactTestInstance | null): R;
  toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R;
  toHaveProp(attr: string, value?: unknown): R;
  toHaveStyle(style: StyleProp<ViewStyle | TextStyle | ImageStyle>): R;
  toHaveAccessibilityState(state: AccessibilityState): R;
  toHaveAccessibilityValue(state: AccessibilityValueMatcher): R;

  /** @deprecated This function has been renamed to `toBeEmptyElement`. */
  toBeEmpty(): R;
}

// implicit jest globals, types coming from `@types/jest`
declare global {
  namespace jest {
    interface Matchers<R, T> extends JestNativeMatchers<R> {}
  }
}

// explicit jest globals, types coming from `@jest/globals`
declare module '@jest/expect' {
  interface Matchers<R extends void | Promise<void>> extends JestNativeMatchers<R> {}
}

Code example here. You need to comment/delete interface extension in /node_modules/@testing-library/jest-native/extend-expect.d.ts to test the @types/jest case.

Shamelessly copied this into my jest.config.ts - one thing I had to add was a clarification on the R:

declare global {
    namespace jest {
        interface Matchers<R extends Promise<void>, T> extends JestNativeMatchers<R> { }
    }
}

This stopped my ts from complaining, although I admit I don't understand why this works.