From 6ef57fe8fc863915a6789cc1f7624a0b04e6e47a Mon Sep 17 00:00:00 2001
From: tsiq-swyx <35976578+tsiq-swyx@users.noreply.github.com>
Date: Mon, 2 Apr 2018 14:50:02 -0400
Subject: [PATCH] add documentation for using Matchers w/ Typescript

as mentioned in #36
---
 README.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/README.md b/README.md
index 1fd7de3e..45790f52 100644
--- a/README.md
+++ b/README.md
@@ -82,6 +82,7 @@ facilitate testing implementation details). Read more about this in
 * [Custom Jest Matchers](#custom-jest-matchers)
   * [`toBeInTheDOM`](#tobeinthedom)
   * [`toHaveTextContent`](#tohavetextcontent)
+  * [Custom Jest Matchers - Typescript](#custom-jest-matchers-typescript)
 * [`TextMatch`](#textmatch)
 * [`query` APIs](#query-apis)
 * [Examples](#examples)
@@ -343,6 +344,34 @@ expect(getByTestId('count-value')).toHaveTextContent('2')
 expect(getByTestId('count-value')).not.toHaveTextContent('21')
 // ...
 ```
+### Custom Jest Matchers - Typescript
+
+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:
+
+```typescript
+// this adds custom expect matchers
+import 'react-testing-library/extend-expect';
+interface ExtendedMatchers extends jest.Matchers<void> {
+  toHaveTextContent: (htmlElement: string) => object;
+  toBeInTheDOM: () => void;
+}
+test('renders the tooltip as expected', async () => {
+  const {
+    // getByLabelText,
+    getByText,
+    //  getByTestId,
+    container
+  } = render(<Tooltip label="hello world">Child</Tooltip>);
+  // tests rendering of the child
+  getByText('Child');
+  // tests rendering of tooltip label
+  (expect(getByText('hello world')) as ExtendedMatchers).toHaveTextContent(
+    'hello world'
+  );
+  // snapshots work great with regular DOM nodes!
+  expect(container.firstChild).toMatchSnapshot();
+});
+```
 
 ## `TextMatch`