React Async Testing using React Testing Library for Beginners: React.js Testing Tutorial #4

We are going to use findBy, waitFor
waitForElementToBeRemoved query methods from react testing library in order to test async code.

I'l also show the most common mistakes and struggles people have while testing async code and give you my solutions to those common problems.

React testing library provides several utilities for dealing with asynchronous code. These can be useful to wait for an element to appear or disappear in response to an event, user action, timeout, or Promise.

findBy Queries: findBy methods are a combination of getBy queries and waitFor. findBy queries work when you expect an element to appear but the change to the DOM might not happen immediately.

waitForElementToBeRemoved: To wait for the removal of element(s) from the DOM you can use waitForElementToBeRemoved. The waitForElementToBeRemoved function is a small wrapper around the waitFor utility.

-----
Timeline:
00:00 Introduction
00:18 What is Async code?
01:35 findBy and waitFor explanation
03:10 Comparing findBy with getBy and queryBy
04:15 Code Starts: Add async code
07:20 Where people start to struggle + solutions!!!
12:45 Wait for elements to disapppear from the screen
16:24 Where people struggle a LOT + solutions!!!
22:00 How you can get my help :)

-----
----
Join the channel to support my content:
----
----

Follow me on:

[sangtv_AK]

This series is amazing. Thank you for sharing your knowledge.

[ricardocosta]

I'm very sad that this kind of videos don't have more views (at the moment 373 views, 6 days after being release). This is such an important topic, and one that I have dificulty in. I hope you continue this series, because it's helping me a lot. Thank you Bruno for time and effort to make such quality videos :).

[danieljing]

this series of video should be seen by more people. very helpful!

[khalilchermiti]

great video Bruno 👏, I'm going to watch the whole playlist to solidify my knowledge with react testing.

[washingtoncampos]

hello bruno, i don't know if you remember me but i was following you since the beginner of your channel, it's always great to see awesome people like you doing this amazing content, keep up the great work man.

[BrainwavesPotential]

Man, this series is truly awesome. Thank you for taking the time to share some of your knowledge with us!

[zakariaamagdy]

You are awesome Bruno. loved your teaching style

[alpsavasdev]

Love your passion and talent in teaching. I really appreciate your tutorials, they are quite insightful.

[mooder]

So nice waiting for more content about nextjs😍

[albertszymanski]

Excellent series. Besides the content which is awesome, you seem to be a very amiable and cheerful person, which makes watching and learning even more enjoyable.

[sayedalimousavi]

Liked your cool videos and subscirbed to your awesome channel. Keep up the good work, sir. Thanks alot.

[miw]

This issss excellent!!! ❤❤❤❤❤❤❤❤ thank you so much for such an awesome tutorial

[bchler]

Hey! Thanks for the great tutorial! Do u also use storybook for testing?

[ismoilshokirov]

God bless you, Mr. Bruno, thank you for sharing your knowledge))

I have a small question:

Should I use NextJS in projects where I don't care about the SEO part? Ex. for admin panels
Because I feel more comfortable with NextJS. Also, I think NextJS apps run much faster than regular "create-react-app"

[dhahn]

obrigado Bruno! can you do a series on redux testing w/ react native testing library?

[keiji]

I have a question . if active = true the useState will change bigenough state, then reRender again. then active will be true again,
and component will render again and again. not stop is it right?

[janpawedwa]

At 16:48 you mention that after the test will run, the component gets destroyed? Why? Does every test "throw out" the tested component when it is finished with the testing?

[benevans]

Hey Bruno, off topic question but I couldn't find the answer online: how do you make a database connection on the nextjs startup function without creating a whole new custom server (which loses benefits like ssr) or having a custom server but keeping those benefits the next js startup function has?

[usmanshahid]

Bro i did not understand why we use to test something, like in your case you are testing the button which increments and decrements, but this button is working fine then why there is need to test that button ?? Can you explain bro