How to make this extend-expect work in Typescript?

[tsiq-swyx]

extend-expect throws a couple more things onto extend and of course typescript doesnt like that. Is there a way to also expand the types or otherwise modify index.d.ts to accommodate for the changed type signature of expect?

for google purposes this is the error i get:

[ts] Property 'toHaveTextContent' does not exist on type 'Matchers<void>'.
any

[kentcdodds]

No idea. Perhaps there are clues in jest-extended?

[tsiq-swyx]

i just scanned through their code, they dont even have types -at all- so they're actually worse off than react-testing-library 😂

[tsiq-swyx]

ok so i worked out how to use them, we might want to 1) document this 2) put this into the index.d.ts.

// standard stuff from the example
import * as React from 'react';
import {render, Simulate, wait} from 'react-testing-library'

// extends
import 'react-testing-library/extend-expect';
interface ExtendedMatchers extends jest.Matchers<void> {
  toHaveTextContent: (htmlElement: string) => object;
  toBeInTheDOM: () => void;
}

//usage example
test('displays greeting when clicking Load Greeting', async () => {
  const { getByLabelText, getByText, getByTestId, container } = render(
    <Tooltip label="hello world">Child</Tooltip>
  );
  (getByLabelText('name') as HTMLInputElement).value = 'Mary';
  (expect(getByTestId('greeting-text')) as ExtendedMatchers).toHaveTextContent(
    'Hello Mary'
  );
})

[tsiq-swyx]

let me know how you want this to proceed kent. i can take care of this entirely in userland, but you could help a very little bit by including this in the index.d.ts

[kentcdodds]

Seems fine to me. I don't maintain the typings myself, but if you want to help take over maintaining the typings that'd be super.

[tsiq-swyx]

I would be happy to do that. I just realized though that any types that this lib ships with would bind it to a particular testing frame work, eg jest. so this is probably actually best solved in userland. I will just submit a minor documentation PR for a typescript section.

[kentcdodds]

Actually, this file is specific to Jest so if there's a way to only apply these types if this file is utilized then that'd be fine.

[antsmartian]

@tsiq-swyx Thanks for the fix. @kentcdodds Somehow, I'm not getting the notifications on this project, even though I'm watching it ;) Checking manually now :)

[antsmartian]

Closing this w.r.t 3a5eab8

[michalstocki]

Just passing by looking for solution for a similar issue. I've found out a solution. You can probably fix the issue by putting the following code in the typings of react-testing-library:

declare namespace jest {
  interface Matchers<R> {
    toHaveTextContent: (htmlElement: string) => object;
    toBeInTheDOM: () => void;
  }

  interface Expect {
    toHaveTextContent: (htmlElement: string) => object;
    toBeInTheDOM: () => void;
  }
}

It uses Declaration Merging.