@@ -4,6 +4,68 @@ title: Example
4
4
sidebar_label : Example
5
5
---
6
6
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
+
7
69
## Full Example
8
70
9
71
See the following sections for a detailed breakdown of the test
0 commit comments