React Testing Library Tutorial #12 - Finding Async Elements with FindBy

Check out Laith's YouTube channel for more tutorials:

🐱‍💻 Access the course files on GitHub:

🐱‍👤 Get access to extra premium courses on Net Ninja Pro:

🐱‍💻 Full React Course:

🐱‍💻 Social Links:

[terryq]

This is a gem tutorial since so many React courses out there but not so many React Testing Library courses. This is def what I am looking for. Thank you!

[vanmeeganathanpk]

Really loved this series ! I have started to love writing tests. It was earlier a nightmare. Thank you so much 😊

[veneethraj]

Gave a boost to face the interview questions on react unit testing

[devbhomisanskriti]

Hey Bro I love the way you are Explaining the test Thank you so much for the course.

please can we add a video for the Redux

[aveek.roy.]

findTestById is failing for me - any suggestions how to resolve it?
getting the below error:
Unable to find an element by:

[dawid_dahl]

Do you recommend to query by test-id rather than by say the className? Maybe doing that is less brittle since developers maybe are more likely to change a className than a test-id?

[suhasrao]

There is a problem with the recent axios v1.2. It will give import error. Add the below line at the end of package.json

"jest": {
"transformIgnorePatterns": ["node_modules/(?!axios)/"]
}

restart the test and it will work. This is a temporary solution until axios fixes it

[debarghyachakraborty]

findBy methods are not working as shown here. In the FollowersList.js file the following error is being listed:

_TypeError: Cannot destructure property 'data' of '(intermediate value)' as it is undefined._

[deynerfranciscolezcano]

I am not sure about the use of getByTestId. Is it part of good practices to actually use those "data-testId" in our code?

[gustavomercado]

Hey bro, I really like your course and I want to make a similar course of this in spanish, do you have any problem if I use some of your examples? obviusly I will mention you

[josephkausits]

Nice tutorial! but I do want to point out, that you shouldn't use index as a key, since the index will change if you add/remove an item, and cause inefficiencies in the re-render. You should instead use the id, or some other unique identifier

[priyankabhosale]

can we create only one one __test__ folder for all components which are we going to test?

[devrano]

If your tests are failing for this, remove __mocks__ in src, problem will be fixed.

[Poopuupoo]

Hey @6:30 the code 'follower-item-${index}' how come your ${index) is unaffected by the quotation?

[surajdutta]

you are a life saver. thanks a lot for this video

[Human_Evolution-]

I could not re-create these results with my app. 2 hours of Someone help me. 5 days of studying tests and I have 0 meaningful tests

[OmarBalah-hs]

What is a program do you record your screen

[dangerzone-]

Really awesome tutorial. Could you please create a shopping website with all features{filter, color, variants etc} using React hooks and api?

[sprmke]

To solve the error: "Unable to find an element by ..."
The code below will fix it..
.
.
.

const followerDivElement = await waitFor(
() => screen.findByTestId('follower-item-0'),
{ timeout: 5000 }
);
.
.

.
It seems the amount of time the API returns our data is more than 1 second (default timeout duration).

We can use waitFor method to configure the timeout duration.

Then just add key={index} to <div className='follower-item' > element on FollowersList.js to fix the next error..

[buzzer]

lol its funny, that you used in every vid async without awaiting anything but in this vid you removed it, to show how to add async.lol