Skip to content

Commit 7cdb616

Browse files
authored
docs: more robust typescript instructions
2 parents eba6eea + 2e56626 commit 7cdb616

File tree

1 file changed

+10
-18
lines changed

1 file changed

+10
-18
lines changed

README.md

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -163,27 +163,19 @@ expect(getByTestId(container, 'delete-button')).not.toHaveClass('btn-link')
163163

164164
### Using with Typescript
165165

166-
When you use custom Jest Matchers with Typescript, you will need to extend the
167-
type signature of `jest.Matchers<void>`, then cast the result of `expect`
168-
accordingly. Here's a handy usage example:
166+
When you use custom Jest Matchers with Typescript, you can extend `jest.Matchers`
167+
interface provided by `@types/jest` package by creating `.d.ts` file somewhere
168+
in your project with following content:
169169

170170
```typescript
171-
// this adds custom expect matchers once
172-
import 'jest-dom/extend-expect'
173-
174-
interface ExtendedMatchers extends jest.Matchers<void> {
175-
toHaveTextContent: (htmlElement: string) => object
176-
toBeInTheDOM: () => void
171+
declare namespace jest {
172+
interface Matchers<R> {
173+
toHaveAttribute: (attr: string, value?: string) => R
174+
toHaveTextContent: (htmlElement: string) => R
175+
toHaveClass: (className: string) => R
176+
toBeInTheDOM: () => R
177+
}
177178
}
178-
179-
test('renders the tooltip as expected', async () => {
180-
// however you render it:
181-
// render(`<div><span>hello world</span></div>`)
182-
;(expect(
183-
container,
184-
document.querySelector('span'),
185-
) as ExtendedMatchers).toHaveTextContent('hello world')
186-
})
187179
```
188180

189181
## Inspiration

0 commit comments

Comments
 (0)