Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commite376849

Browse files
docs: Add more info about slow tests in the FE (#6584)
1 parentb806d1c commite376849

File tree

1 file changed

+26
-0
lines changed

1 file changed

+26
-0
lines changed

‎docs/contributing/frontend.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,3 +140,29 @@ Choosing what to test is not always easy since there are a lot of flows and a lo
140140
- Things that can block the user
141141
- Reported bugs
142142
- Regression issues
143+
144+
###Tests getting too slow
145+
146+
A few times you can notice tests can take a very long time to get done. Sometimes it is because the test itself is complex and runs a lot of stuff, and sometimes it is because of how we are querying things. In the next section, we are going to talk more about them.
147+
148+
####Using`ByRole` queries
149+
150+
One thing we figured out that was slowing down our tests was the use of`ByRole` queries because of how it calculates the role attribute for every element on the`screen`. You can read more about it on the links below:
151+
152+
-https://stackoverflow.com/questions/69711888/react-testing-library-getbyrole-is-performing-extremely-slowly
153+
-https://github.com/testing-library/dom-testing-library/issues/552#issuecomment-625172052
154+
155+
Even with`ByRole` having performance issues we still want to use it but for that, we have to scope the "querying" area by using the`within` command. So instead of using`screen.getByRole("button")` directly we could do`within(form).getByRole("button")`.
156+
157+
❌ Not ideal. If the screen has a hundred or thousand elements it can be VERY slow.
158+
159+
```tsx
160+
user.click(screen.getByRole("button"))
161+
```
162+
163+
✅ Better. We can limit the number of elements we are querying.
164+
165+
```tsx
166+
const form=screen.getByTestId("form")
167+
user.click(within(form).getByRole("button"))
168+
```

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp