How to Test In React - React Testing Library + Jest Tutorial
ฝัง
- เผยแพร่เมื่อ 15 ก.ย. 2024
- In this video I will teach you guys how test in react using the react testing library and jest. Testing is very important when building an application!
-
❤️ Want to Support the Channel?:
/ @pedrotechnologies
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: machadop1407@gmail.com
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#PedroTech #react #reactjs #reacttestinglibrary
Had to repost the video cause I realized the audio was extremely low! Hope you all enjoy it :)
Another thing, I like using data-testid but sometimes it is totally recommended to use other identifiers. Test id is a very specific identifier, which differs from others like title/id/classname. Some people recommend using data-testid only for the last resort, however some people also argue in favour of using it most times. It depends on what you chose :)
Every job I had had me do tests. This is extremely important to understand. Also having graphics coverage reports helps a lot, the testing library can generate an html which shows how much you've covered.
Hello Pedro ! thank you so much for the video
AEE PORRAAA EU vim do React native de empresa onde a gente testava as coisas direito, fui achar seu video na 4 pagina e FINALMENTE UM TESTE QUE PRESTA, a maioria era porcaria pegando por texto ou getElement, pelo amor de deus, ALELUIA, MUITO OBRIGADO
VAI BRASILLLL
Thank you Pedro, this is really helpful. I have always been afraid of writing tests because it was like a blackbox to me but the way you explained has unwrapped many confusing concepts. Cheers :)
I love your videos, you explain everything so well and make it seem like a child's play
Thanks a lot pedro, i am searching for this type of clear explanation and do more videos ...
Excellent video Pedro. Concepts were very clearly addressed.
Thanks for sharing this!
Hi. Loving the video. At 16:10 you said you'd put a link in the description for the documentation for { render }. Can you post that please?
Thanx
Thanks, that was helpful.
Love u pedro ❤
Hi I have seen really awesome content on your channel, can you do a video, how to use react project **MUI with styled-components library both together**, including how to set theme/how to style components and advanced concept (how to style set up this for enterprise app,etc), what are the best way use both library togehter,bcz ,there are no proper reference out there for that use case.hope you will create a awesome, project on this content.
Thanks Pedro , just to ask . Would the implementation differ a lot when typescript is used ??
Boa Pedroca! Brabo demais.
Fucking thanks man! I hope you do more test but on a bigger project? I've been following you for a while and I learned a lot from you.
Thank youuuuuu
super helpful!
Thank you!
my tests failed. Error shows :
TestingLibraryElementError: Unable to find an element by: [data-testid="button"]
what could be the possible error i made?
Will we test after the whole Reactjs application is finished? or do it after a component is finished?
pls create a video on 2 file upload using two different from tag using react js and cloudinary 🙏🏻🙏🏻🙏🏻🙏🏻
i would love that
hello i always find this problem with redux Request User › rendered input
could not find react-redux context value; please ensure the component is wrapped in a
any solution please
dude, where's the specific git repository for this project?...thank you in advance...
How to mock api
Thanks.
Great
I'm facing a problem with `act`. Can anyone help? When I use `getByTestId` within `act` it says TestingLibraryElementError: Unable to find an element by: [data-testid="searchBar"] . I entered the testid string correctly. If I remove the act function and place `getByTestId` outside of it, it is working. Don't understand why.
@@faisalsayyed8877 not yet
The problem is that it's looking up a component that isn't rendered yet. Putting the whole testing function into async doesn't work in this case, just put async onto the function which contains the fireEvent method and let it show the warning. The test will pass anyway.
Do you do TDD in your current job?
Yes :)
is there code somewhere posted?
This literally didnt work for me for some reason, digging into the docs they literally say " it is recommended to use GetByTestId only after the other queries don't work for your use case. Using data-testid attributes do not resemble how your software is used and should be avoided if possible."
Video is a bit below what I usually see from this channel tbh
I'm sorry to hear that! I am planning on more testing videos soon. My plans are to do one updated video on React testing and one on backend testing. I get what you mean, and you are right about the GetByTestid.
@@PedroTechnologies Thanks man, if im stuck on something and I see a video by you on the topic, I go for it. Don't want others to see bad practices and avoid your channel as being unreliable. that was just my constructive criticism.
Hi @@ssj1260, I'd been through it as well and trying to figure out what was wrong before going for a real solution.
You can easily solve this problem by using 'screen' from the same library. Once your code's been repaired, it should look something like this:
import { render, screen, fireEvent } from '@testing-library/react'
const input = screen.getByTestId('searchbar')
Pedro has probably mentioned it in his last video about the topic though.
Please share the documentation link at 16:09
I hated testing till now
Great