TypeScript fails to find extended expect methods

[lewie9021]

• react-native or expo: 0.59.2
• @testing-library/react-native version: 4.0.2
• @testing-library/jest-native version: 3.0.1
• jest-preset: "@testing-library/react-native"
• react-native version: 0.59.2
• typescript version: 3.1.6
• node version: 10.13.0

Relevant code or config:

import * as React from "react";
import { Text } from "react-native";
import { render } from "@testing-library/react-native";

function Example() {
  return (
    <Text testID="text">2</Text>
  );
}

it("works without TypeScript errors", () => {
  const { getByTestId } = render(<Example />);

  expect(getByTestId("text")).toHaveTextContent("2");
});

What you did:

Installed jest-native within a project using TypeScript.

What happened:

I get a TypeScript error when using any of the custom matchers from the library, e.g:

Error:(14, 31) TS2339: Property 'toHaveTextContent' does not exist on type 'Matchers<Pick<ReactTestInstance, "type" | "props" | "parent" | "children" | "find" | "findAll">>'.

Reproduction:

See code above.

Problem description:

Without the correct typings, it's not possible to use the additional assertions from the library within a TypeScript project.

Suggested solution:

Since Jest exposes expect globally, it appears we need to merge the matchers in the global namespace, meaning extend-expect.d.ts should look like this:

import { ReactTestInstance } from 'react-test-renderer';

declare global {
  namespace jest {
    interface Matchers<R> {
      toBeDisabled(): R;
      toContainElement(element: ReactTestInstance | null): R;
      toBeEmpty(): R;
      toHaveProp(attr: string, value?: any): R;
      toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R;
      toBeEnabled(): R;
      toHaveStyle(style: object[] | object): R;
    }
  }
}

[bcarroll22]

Hey thanks for pointing this out. I think that it makes sense to me, but my only question is, this is how the matchers are typed in jest-dom as well, so do you think this a problem there as well? I couldn't find any issues about this on their repo and that one is widely used by more than just React folks, so are we positive this isn't something else at play?

Admittedly, I don't know why they did it that way over there (perhaps @gnapse could help me out with this one) but it seems like since it works there it should work here? 🤔

[lewie9021]

That's a valid point. I've not used react-testing-library or jest-dom yet, but like you say - if that works so should this. My solution came from an issue in the react-testing-library project here. It's probably worth noting that I'm using v3.1.6 of TypeScript with this library, so that might be part of the issue

[bcarroll22]

@lewie9021 what's the verdict here? what do you think we should do?

[marnusw]

I believe the import changes the definition from global augmentation to a module definition. In jest-dom there is no import and as such they too are augmenting the global namespace. I've confirmed the suggested solution works and have created a PR #9 for it.

[bcarroll22]

🎉 This issue has been resolved in version 3.0.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[sinxwal]

I think that error was not fixed in 3.0.2

[bcarroll22]

🤔 can anyone else chime in? Or if anyone can think of a better fix for the issue, PRs are welcome 👍

[marnusw]

For the record I'm using version 3.0.2 without any further issues. It might help to understand your setup better @sinxwal.

[alexandermckay]

I am still getting the issue in version 3.0.2

EDIT: After changing my setupFiles.js file to setupFiles.ts the warning went away.