Skip to content

Commit feeeb31

Browse files
authored
Add quickstart example (testing-library#1140)
1 parent 82bd2d8 commit feeeb31

File tree

1 file changed

+62
-0
lines changed

1 file changed

+62
-0
lines changed

docs/react-testing-library/example-intro.mdx

+62
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,68 @@ title: Example
44
sidebar_label: Example
55
---
66

7+
## Quickstart
8+
9+
This is a minimal setup to get you started.
10+
If you want to see a description of what each line does,
11+
scroll down to the [annotated version](#quickstart-annotated).
12+
Scroll down to [Full Example](#full-example) to see a more advanced test setup.
13+
14+
```jsx
15+
import { render, screen } from '@testing-library/react'
16+
import userEvent from '@testing-library/user-event'
17+
import '@testing-library/jest-dom'
18+
import Fetch from './fetch'
19+
20+
test('loads and displays greeting', async () => {
21+
22+
// ARRANGE
23+
render(<Fetch url="/greeting" />)
24+
25+
// ACT
26+
await userEvent.click(screen.getByText('Load Greeting'))
27+
await screen.findByRole('heading')
28+
29+
// ASSERT
30+
expect(screen.getByRole('heading')).toHaveTextContent('hello there')
31+
expect(screen.getByRole('button')).toBeDisabled()
32+
33+
})
34+
```
35+
36+
<details id="quickstart-annotated">
37+
<summary>Quickstart (Annotated Example)</summary>
38+
39+
```jsx
40+
// import react-testing methods
41+
import { render, screen } from '@testing-library/react'
42+
// userEvent library simulates user interactions by dispatching the events that would happen if the interaction took place in a browser.
43+
import userEvent from '@testing-library/user-event'
44+
// add custom jest matchers from jest-dom
45+
import '@testing-library/jest-dom'
46+
// the component to test
47+
import Fetch from './fetch'
48+
49+
test('loads and displays greeting', async () => {
50+
51+
// Render a React element into the DOM
52+
render(<Fetch url="/greeting" />)
53+
54+
await userEvent.click(screen.getByText('Load Greeting'))
55+
// wait before throwing an error if it cannot find an element
56+
await screen.findByRole('heading')
57+
58+
// assert that the alert message is correct using
59+
// toHaveTextContent, a custom matcher from jest-dom.
60+
expect(screen.getByRole('heading')).toHaveTextContent('hello there')
61+
expect(screen.getByRole('button')).toBeDisabled()
62+
63+
})
64+
```
65+
66+
</details>
67+
68+
769
## Full Example
870

971
See the following sections for a detailed breakdown of the test

0 commit comments

Comments
 (0)