Skip to content

Commit 3a5eab8

Browse files
tsiq-swyxKent C. Dodds
authored andcommitted
docs: add documentation for using Matchers w/ Typescript (#37)
as mentioned in #36
1 parent 2bf760c commit 3a5eab8

File tree

1 file changed

+29
-0
lines changed

1 file changed

+29
-0
lines changed

README.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ facilitate testing implementation details). Read more about this in
8282
* [Custom Jest Matchers](#custom-jest-matchers)
8383
* [`toBeInTheDOM`](#tobeinthedom)
8484
* [`toHaveTextContent`](#tohavetextcontent)
85+
* [Custom Jest Matchers - Typescript](#custom-jest-matchers-typescript)
8586
* [`TextMatch`](#textmatch)
8687
* [`query` APIs](#query-apis)
8788
* [Examples](#examples)
@@ -343,6 +344,34 @@ expect(getByTestId('count-value')).toHaveTextContent('2')
343344
expect(getByTestId('count-value')).not.toHaveTextContent('21')
344345
// ...
345346
```
347+
### Custom Jest Matchers - Typescript
348+
349+
When you use custom Jest Matchers with Typescript, you will need to extend the type signature of `jest.Matchers<void>`, then cast the result of `expect` accordingly. Here's a handy usage example:
350+
351+
```typescript
352+
// this adds custom expect matchers
353+
import 'react-testing-library/extend-expect';
354+
interface ExtendedMatchers extends jest.Matchers<void> {
355+
toHaveTextContent: (htmlElement: string) => object;
356+
toBeInTheDOM: () => void;
357+
}
358+
test('renders the tooltip as expected', async () => {
359+
const {
360+
// getByLabelText,
361+
getByText,
362+
// getByTestId,
363+
container
364+
} = render(<Tooltip label="hello world">Child</Tooltip>);
365+
// tests rendering of the child
366+
getByText('Child');
367+
// tests rendering of tooltip label
368+
(expect(getByText('hello world')) as ExtendedMatchers).toHaveTextContent(
369+
'hello world'
370+
);
371+
// snapshots work great with regular DOM nodes!
372+
expect(container.firstChild).toMatchSnapshot();
373+
});
374+
```
346375
347376
## `TextMatch`
348377

0 commit comments

Comments
 (0)