Property 'toHaveTextContent' does not exist on type 'Matchers<void> & ...' (and any other matcher from library) about jest-native HOT 15 CLOSED

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.

from jest-native.

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.

from jest-native.

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

from jest-native.

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

from jest-native.

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

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

from jest-native.

from jest-native.

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

from jest-native.

@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

from jest-native.

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.

from jest-native.

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> {}
    }
}

from jest-native.

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

from jest-native.

@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.

from jest-native.

@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;
  }
}

from jest-native.

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.

from jest-native.

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.

from jest-native.