Skip to content

Commit e0b70f9

Browse files
ghengeveldghengeveld
committed
Replace waitForElement(getByText(...)) with findByText(...).
1 parent 1bd1f42 commit e0b70f9

File tree

5 files changed

+113
-115
lines changed

5 files changed

+113
-115
lines changed

‎packages/react-async-devtools/src/index.spec.js‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import "@testing-library/jest-dom/extend-expect"
22
import React from "react"
33
import { useAsync } from "react-async"
4-
import { render, cleanup, waitForElement, fireEvent } from "@testing-library/react"
4+
import { render, cleanup, fireEvent } from "@testing-library/react"
55
import DevTools from "./index"
66
import "../../../jest.setup"
77

@@ -18,64 +18,64 @@ afterEach(cleanup)
1818
describe("DevTools", () => {
1919
test("shows pending requests", async () => {
2020
const promiseFn = () => new Promise(() => {}) // never resolve
21-
const { getByText } = render(
21+
const { findByText } = render(
2222
<>
2323
<DevTools />
2424
<Async promiseFn={promiseFn} debugLabel="example" />
2525
</>
2626
)
27-
await waitForElement(() => getByText("loading"))
28-
await waitForElement(() => getByText("Pending"))
29-
await waitForElement(() => getByText("example"))
27+
await findByText("loading")
28+
await findByText("Pending")
29+
await findByText("example")
3030
})
3131

3232
test("shows fulfilled requests", async () => {
3333
const promiseFn = () => Promise.resolve("done")
34-
const { getByText } = render(
34+
const { findByText } = render(
3535
<>
3636
<DevTools />
3737
<Async promiseFn={promiseFn} debugLabel="example" />
3838
</>
3939
)
40-
await waitForElement(() => getByText("done"))
41-
await waitForElement(() => getByText("Fulfilled"))
42-
await waitForElement(() => getByText("example"))
40+
await findByText("done")
41+
await findByText("Fulfilled")
42+
await findByText("example")
4343
})
4444

4545
test("shows rejected requests", async () => {
4646
const promiseFn = () => Promise.reject("oops")
47-
const { getByText } = render(
47+
const { findByText } = render(
4848
<>
4949
<DevTools />
5050
<Async promiseFn={promiseFn} debugLabel="example" />
5151
</>
5252
)
53-
await waitForElement(() => getByText("oops"))
54-
await waitForElement(() => getByText("Rejected"))
55-
await waitForElement(() => getByText("example"))
53+
await findByText("oops")
54+
await findByText("Rejected")
55+
await findByText("example")
5656
})
5757

5858
test("allows toggling interception of requests", async () => {
5959
const promiseFn = () => Promise.resolve("done")
60-
const { getByText, getByLabelText, queryByText, rerender } = render(<DevTools />)
60+
const { getByText, getByLabelText, findByText, queryByText, rerender } = render(<DevTools />)
6161
fireEvent.click(getByLabelText("Pause new requests"))
6262
rerender(
6363
<>
6464
<DevTools />
6565
<Async promiseFn={promiseFn} debugLabel="example" />
6666
</>
6767
)
68-
await waitForElement(() => getByText("Pending"))
68+
await findByText("Pending")
6969
expect(queryByText("Fulfilled")).not.toBeInTheDocument()
7070
fireEvent.click(getByText("run"))
71-
await waitForElement(() => getByText("Fulfilled"))
71+
await findByText("Fulfilled")
7272
})
7373

7474
test("allows changing the latency", async () => {
75-
const { getByRole, getByText } = render(<DevTools />)
76-
await waitForElement(() => getByText("Latency:"))
77-
await waitForElement(() => getByText("0 seconds"))
75+
const { getByRole, findByText } = render(<DevTools />)
76+
await findByText("Latency:")
77+
await findByText("0 seconds")
7878
fireEvent.change(getByRole("slider"), { target: { value: 2 } })
79-
await waitForElement(() => getByText("2 seconds"))
79+
await findByText("2 seconds")
8080
})
8181
})

‎packages/react-async/src/Async.spec.js‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import "@testing-library/jest-dom/extend-expect"
44
import React from "react"
5-
import { render, fireEvent, cleanup, waitForElement } from "@testing-library/react"
5+
import { render, fireEvent, cleanup } from "@testing-library/react"
66
import Async, { createInstance, globalScope } from "./index"
77
import {
88
resolveIn,
@@ -59,7 +59,7 @@ describe("Async.Fulfilled", () => {
5959
test("renders only after the promise is resolved", async () => {
6060
const promiseFn = () => resolveTo("ok")
6161
const deferFn = () => rejectTo("fail")
62-
const { getByText, queryByText } = render(
62+
const { getByText, findByText, queryByText } = render(
6363
<Async promiseFn={promiseFn} deferFn={deferFn}>
6464
<Async.Fulfilled>
6565
{(data, { run }) => <button onClick={run}>{data}</button>}
@@ -68,19 +68,19 @@ describe("Async.Fulfilled", () => {
6868
</Async>
6969
)
7070
expect(queryByText("ok")).toBeNull()
71-
await waitForElement(() => getByText("ok"))
71+
await findByText("ok")
7272
expect(queryByText("ok")).toBeInTheDocument()
7373
expect(queryByText("fail")).toBeNull()
7474
fireEvent.click(getByText("ok"))
75-
await waitForElement(() => getByText("fail"))
75+
await findByText("fail")
7676
expect(queryByText("ok")).toBeNull()
7777
expect(queryByText("fail")).toBeInTheDocument()
7878
})
7979

8080
test("with persist renders old data on error", async () => {
8181
const promiseFn = () => resolveTo("ok")
8282
const deferFn = () => rejectTo("fail")
83-
const { getByText, queryByText } = render(
83+
const { getByText, findByText, queryByText } = render(
8484
<Async promiseFn={promiseFn} deferFn={deferFn}>
8585
<Async.Fulfilled persist>
8686
{(data, { run }) => <button onClick={run}>{data}</button>}
@@ -89,19 +89,19 @@ describe("Async.Fulfilled", () => {
8989
</Async>
9090
)
9191
expect(queryByText("ok")).toBeNull()
92-
await waitForElement(() => getByText("ok"))
92+
await findByText("ok")
9393
expect(queryByText("ok")).toBeInTheDocument()
9494
expect(queryByText("fail")).toBeNull()
9595
fireEvent.click(getByText("ok"))
96-
await waitForElement(() => getByText("fail"))
96+
await findByText("fail")
9797
expect(queryByText("ok")).toBeInTheDocument()
9898
expect(queryByText("fail")).toBeInTheDocument()
9999
})
100100

101101
test("Async.Fulfilled works also with nested Async", async () => {
102102
const outer = () => resolveIn(0)("outer")
103103
const inner = () => resolveIn(100)("inner")
104-
const { getByText, queryByText } = render(
104+
const { findByText, queryByText } = render(
105105
<Async promiseFn={outer}>
106106
<Async.Fulfilled>
107107
{outer => (
@@ -114,32 +114,32 @@ describe("Async.Fulfilled", () => {
114114
</Async>
115115
)
116116
expect(queryByText("outer pending")).toBeNull()
117-
await waitForElement(() => getByText("outer pending"))
117+
await findByText("outer pending")
118118
expect(queryByText("outer inner")).toBeNull()
119-
await waitForElement(() => getByText("outer inner"))
119+
await findByText("outer inner")
120120
expect(queryByText("outer inner")).toBeInTheDocument()
121121
})
122122
})
123123

124124
describe("Async.Pending", () => {
125125
test("renders only while the promise is pending", async () => {
126126
const promiseFn = () => resolveTo("ok")
127-
const { getByText, queryByText } = render(
127+
const { findByText, queryByText } = render(
128128
<Async promiseFn={promiseFn}>
129129
<Async.Pending>pending</Async.Pending>
130130
<Async.Fulfilled>done</Async.Fulfilled>
131131
</Async>
132132
)
133133
expect(queryByText("pending")).toBeInTheDocument()
134-
await waitForElement(() => getByText("done"))
134+
await findByText("done")
135135
expect(queryByText("pending")).toBeNull()
136136
})
137137
})
138138

139139
describe("Async.Initial", () => {
140140
test("renders only while the deferred promise has not started yet", async () => {
141141
const deferFn = () => resolveTo("ok")
142-
const { getByText, queryByText } = render(
142+
const { getByText, findByText, queryByText } = render(
143143
<Async deferFn={deferFn}>
144144
<Async.Initial>{({ run }) => <button onClick={run}>initial</button>}</Async.Initial>
145145
<Async.Pending>pending</Async.Pending>
@@ -150,53 +150,53 @@ describe("Async.Initial", () => {
150150
fireEvent.click(getByText("initial"))
151151
expect(queryByText("initial")).toBeNull()
152152
expect(queryByText("pending")).toBeInTheDocument()
153-
await waitForElement(() => getByText("done"))
153+
await findByText("done")
154154
expect(queryByText("pending")).toBeNull()
155155
})
156156
})
157157

158158
describe("Async.Rejected", () => {
159159
test("renders only after the promise is rejected", async () => {
160160
const promiseFn = () => rejectTo("err")
161-
const { getByText, queryByText } = render(
161+
const { findByText, queryByText } = render(
162162
<Async promiseFn={promiseFn}>
163163
<Async.Rejected>{error => error.message}</Async.Rejected>
164164
</Async>
165165
)
166166
expect(queryByText("err")).toBeNull()
167-
await waitForElement(() => getByText("err"))
167+
await findByText("err")
168168
expect(queryByText("err")).toBeInTheDocument()
169169
})
170170
})
171171

172172
describe("Async.Settled", () => {
173173
test("renders after the promise is fulfilled", async () => {
174174
const promiseFn = () => resolveTo("value")
175-
const { getByText, queryByText } = render(
175+
const { findByText, queryByText } = render(
176176
<Async promiseFn={promiseFn}>
177177
<Async.Settled>{({ data }) => data}</Async.Settled>
178178
</Async>
179179
)
180180
expect(queryByText("value")).toBeNull()
181-
await waitForElement(() => getByText("value"))
181+
await findByText("value")
182182
expect(queryByText("value")).toBeInTheDocument()
183183
})
184184

185185
test("renders after the promise is rejected", async () => {
186186
const promiseFn = () => rejectTo("err")
187-
const { getByText, queryByText } = render(
187+
const { findByText, queryByText } = render(
188188
<Async promiseFn={promiseFn}>
189189
<Async.Settled>{({ error }) => error.message}</Async.Settled>
190190
</Async>
191191
)
192192
expect(queryByText("err")).toBeNull()
193-
await waitForElement(() => getByText("err"))
193+
await findByText("err")
194194
expect(queryByText("err")).toBeInTheDocument()
195195
})
196196

197197
test("renders while loading new data and persist=true", async () => {
198198
const promiseFn = () => resolveTo("value")
199-
const { getByText, queryByText } = render(
199+
const { getByText, findByText, queryByText } = render(
200200
<Async initialValue="init" promiseFn={promiseFn}>
201201
<Async.Pending>
202202
<Async.Settled persist>loading</Async.Settled>
@@ -206,8 +206,7 @@ describe("Async.Settled", () => {
206206
)
207207
expect(queryByText("loading")).toBeNull()
208208
fireEvent.click(getByText("reload"))
209-
await waitForElement(() => getByText("loading"))
210-
expect(queryByText("loading")).toBeInTheDocument()
209+
await findByText("loading")
211210
})
212211
})
213212

@@ -216,17 +215,17 @@ describe("createInstance", () => {
216215
const promiseFn = () => resolveTo("done")
217216
const onResolve = jest.fn()
218217
const CustomAsync = createInstance({ promiseFn, onResolve })
219-
const { getByText } = render(<CustomAsync>{({ data }) => data || null}</CustomAsync>)
220-
await waitForElement(() => getByText("done"))
218+
const { findByText } = render(<CustomAsync>{({ data }) => data || null}</CustomAsync>)
219+
await findByText("done")
221220
expect(onResolve).toHaveBeenCalledWith("done")
222221
})
223222

224223
test("accepts watchFn from defaultProps and passes the defaultProps along", async () => {
225224
const promiseFn = () => resolveTo("done")
226225
const watchFn = jest.fn()
227226
const CustomAsync = createInstance({ promiseFn, watchFn })
228-
const { getByText } = render(<CustomAsync>{({ data }) => data || null}</CustomAsync>)
229-
await waitForElement(() => getByText("done"))
227+
const { findByText } = render(<CustomAsync>{({ data }) => data || null}</CustomAsync>)
228+
await findByText("done")
230229
expect(watchFn).toHaveBeenCalledWith(
231230
expect.objectContaining({ promiseFn, watchFn }),
232231
expect.objectContaining({ promiseFn, watchFn })
@@ -236,14 +235,14 @@ describe("createInstance", () => {
236235
test("custom instances also have helper components", async () => {
237236
const promiseFn = () => resolveTo("done")
238237
const CustomAsync = createInstance({ promiseFn })
239-
const { getByText } = render(
238+
const { findByText } = render(
240239
<CustomAsync>
241240
<CustomAsync.Pending>pending</CustomAsync.Pending>
242241
<CustomAsync.Fulfilled>resolved</CustomAsync.Fulfilled>
243242
</CustomAsync>
244243
)
245-
await waitForElement(() => getByText("pending"))
246-
await waitForElement(() => getByText("resolved"))
244+
await findByText("pending")
245+
await findByText("resolved")
247246
})
248247

249248
test("custom instance also passes defaultProps to deferFn", async () => {

0 commit comments

Comments
 (0)