Testing In React Tutorial - Jest and React Testing Library

Рет қаралды 108,110

Күн бұрын

In this video I will be going over testing in react by using Jest and React Testing Library.
Code:
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
Timestamps:
00:00 | Demo
04:03 | Creating tests for components
12:43 | Running tests
22:41 | Using fireEvent
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #coding

Пікірлер: 91

@selfbrilliance9341 2 ай бұрын

I was thriving for this, all the videos on youtube just presumed that we know testing and made a bunch of tutorials on how to do testing but because of your video I know "what" and "why" is testing. Thank you ❤

@ometman 9 ай бұрын

Hey Pedro, thanks for making testing basics very simple.

@markganser5485 2 жыл бұрын

Your videos are awesome! I'd love to see some more advanced testing examples on things such as custom hooks, testing where context is present, async functions, and mocking API responses!

@MehediHassan-pn5uc 2 жыл бұрын

Dude you're a underrated Gem! ❤️

@mysoregopinathshantanu8800 2 жыл бұрын

This helps a lot. And really need more videos on testing.

@ThColinPereira 2 жыл бұрын

Great video Pedro! Super helpful

@SinaTajik Жыл бұрын

The best tutorial for learning react unit test super simple and straight forward :)

@willmann96 11 ай бұрын

thank you for the clear and concise information.

@vandanavishnu1922 Жыл бұрын

Your Videos are very informative. I was able to answer lot of questions in my interview with just watching your videos( react hooks). Now I am watching this . I am sure it will definitely help me...Thanks a lot..

@PedroTechnologies Жыл бұрын

Best of luck!

@universecode1101 2 жыл бұрын

Great topic Pedro, super useful for any developer ✌🏻

@PedroTechnologies 2 жыл бұрын

Thank you!!

@lokers_one 11 ай бұрын

These tests can produce false negatives and your test won't catch all possible bugs, as you convert string to number. It's very risky in JS world as we all know. For example `Number(false)` produces `0` too. Therefore you wouldn't catch all the bugs. Instead, you should change your assertion to expect to `.toEqual("0")`.

@mayurnagdev5545 4 ай бұрын

Thank you this was really helpful

@parvathyvd 2 жыл бұрын

Thanks a lot Pedro :) Another useful video. You keep helping us.

@NikhilPawar151 6 ай бұрын

Thank you for valuable content. This video clear my concept about testing in react.

@travelglobe8997 8 ай бұрын

You got a new subscriber. Simple and on point. Good video bro.

@ankitkumarsharma2372 2 жыл бұрын

Well, It's on exact time. I am going to start to learn Testing in react

@chaitanyasawant776 2 жыл бұрын

Great topic. Make more videos on this topic

@neverexecute2467 2 жыл бұрын

This video is awesome and helps a lot, I also need create a dynamic XML sitemap and HTML sitemap in React

@filipevalentegomes2383 2 жыл бұрын

That’s so funny, I was gonna take a course for this today, haven’t done testing in a while. Thanks for the video

@SharukhKhan-sd7xg 2 жыл бұрын

Which course are you going to buy?

@PedroTechnologies 2 жыл бұрын

Hahahaha hope this video helps! Im planning on making a crash course on it!

@filipevalentegomes2383 2 жыл бұрын

@@PedroTechnologies awesome. Keep up the good work.

@SharukhKhan-sd7xg 2 жыл бұрын

@@PedroTechnologies yes need that one

@filipevalentegomes2383 2 жыл бұрын

@@PedroTechnologies 13 min10 sec, there is an edit mistake I think. It jumps from on frame to another. Not sure if you know about that

@mohitdhule9654 2 жыл бұрын

Thank you 🙏

@psydook 2 жыл бұрын

Hey, thanks for the video! Can you also do one which is like a Coding Interview in React from Begginer to Advanced with something like some typescript concepts included ? I think this will benefit alot of people who are preparing for coding interviews. Thanks again !

@LeslieDuan 2 жыл бұрын

thank you so much, hope to see tutorial about cypress

@ggwellplayed4568 2 жыл бұрын

Continue sharing your knowledge. God will take care fo you. Thanks dude ;)

@cubedesigne 2 жыл бұрын

Thanks your video!!!

@amanjat7 2 ай бұрын

Helpful

@rodrigocastro3934 9 ай бұрын

Great video Pedro. It would be nice to have the 'advanced' version where testing state changes by clicking buttons ;))

@OPlutarch 2 жыл бұрын

Thanks! Can you make more videos about testing? I think that it's a topic that a lot of us we need to improve :) Greetings.

@PedroTechnologies 2 жыл бұрын

For sure!

@omarelgnn7344 Жыл бұрын

@@PedroTechnologies yes this presentation of how to test the component or what should be tested and the component that renders data from API and so on Thanks for all

@tootyrnt5533 8 ай бұрын

Nice video, would be cool to show how this can be set up with Vite + React.

@kranthikumar5215 Жыл бұрын

Love you pedro❤

@brilliantatosam6882 2 жыл бұрын

Awesome content

@sodhigurpreetsingh 2 жыл бұрын

Great video again pedro.. can you make a video on Formik or any other library you know is best for forms..

@karis7539 2 жыл бұрын

i personally love testing because i love automating things with Selenium or Playwright

@JaredFL 2 жыл бұрын

I'd like to see a Webpack beginner video :)

@turing4991 2 жыл бұрын

You should try to make a video on publishing a react component. Publishing a hook is easy.

@GlennMartin 2 жыл бұрын

Pedro my man, how about testing forms and components that fetch data. Would like to learn how to mock them.

@DaltonLaboratories 7 ай бұрын

I would rather use "test" over "it" in your examples. The second one is an alias and it reads better only when you name your tests like this: 'it("should do something.."), it("should display the counter")' etc. Nevertheless, good tutorial, thanks!

@salonipande6190 Жыл бұрын

@Pedro Tech can you please share the playlist of this course

@azizkhujakhujaev2598 2 жыл бұрын

Nice video and can you please make a video about React Native testing library and in advance thanks!

@drawingdr9829 2 жыл бұрын

hello bro thanx for your videos we are really benefit from them. you deployed react node mysql app in heroku but it very expansive . can you do a tutorial about deploy it in digital ocean? thank you

@waleedsharif618 2 жыл бұрын

Could you show jest --coverage And how to get 100% test coverage ?

@shishirrai1069 2 жыл бұрын

Please make video on jest and enzyme

@graycoder9911 6 ай бұрын

I only know of two great developers Ben awad and pedrotech

@bananablu47 Жыл бұрын

Hey what is const { getByTestId } around 9:00 at line 6 ? An anonymous const?

@tsdineshjai8565 2 жыл бұрын

Hey Pedro 👋, if possible do a crash course on this topic

@PedroTechnologies 2 жыл бұрын

Yes, thats on the plans!

@Popo-hr6gc Жыл бұрын

What VSCode theme are u using?

@dylanheslop9161 6 ай бұрын

how can this be done with ts and vite

@christianlewis7055 Жыл бұрын

Weird feedback: that habit of repeatedly highlighting the test while you're busy talking is satisfying only as long as you repeatedly highly exactly the correct area. Like if you start highlighting a string, as long as you start at the opening double quote and finish exactly after the closing quote, I find it satisfying and might actually help to retain my interest. But if you don't hit the mark just right, it will bother me. 😄

@karthikbalaji383 2 жыл бұрын

I have never done testing before so can anyone tell me how percentage of the testing concepts are covered in this video.

@harishg9429 2 жыл бұрын

Can you pls make a video on testing components mocking API , also testing state. Thanks

@PedroTechnologies 2 жыл бұрын

I can fs make one! Testing states is not that good imo, i would rather just spy on the state function and test its functionality bc states dont update equally. Also, testing should be for testing how the UI changes, not how the internal logic acts :)

@harishg9429 2 жыл бұрын

@@PedroTechnologies Thank you Pedro, I like all your videos, they are easy to follow and highly educational.

@ankitchauhan8682 Жыл бұрын

How is he using jsx with. Js extension?

@suvendukumarsahoo4172 Жыл бұрын

He can u have idea testing for post api

@internetexplorer7880 2 жыл бұрын

What vscode theme is this?

@robertvelasquez8641 10 ай бұрын

what if i use vite?

@primy3576 2 жыл бұрын

vs code theme?

@xman3666 Жыл бұрын

If i have a componente such a “loading” using lazy render react. How can I test the elements that come after the loading? 😢

@Way_Of_The_Light Жыл бұрын

ask ChatGPT

@cometarioxD Жыл бұрын

Watch out folks, if you're getting the error message, look for EVERY syntax error possible!

@ranza658 2 жыл бұрын

Is source code available for this video?

@demarbrown439 8 ай бұрын

13:00

@gmmkeshav Жыл бұрын

code of this video?

@patrykK1028 Жыл бұрын

There's no link to the code :/

@bradenmitchell3265 2 жыл бұрын

Deja vu @ 13:09?

@PedroTechnologies 2 жыл бұрын

Thank you for letting me know! This was a mistake on the editing!

@WydeZ Жыл бұрын

where is the code

@arihantjain8347 Жыл бұрын

It wasn't in round figure, stuck at 999, so I made it 1K.

@reactDevelopment Жыл бұрын

can you make avideo on these act() mockComponent() isElement() isElementOfType() isDOMComponent() isCompositeComponent() isCompositeComponentWithType() findAllInRenderedTree() scryRenderedDOMComponentsWithClass() findRenderedDOMComponentWithClass() scryRenderedDOMComponentsWithTag() findRenderedDOMComponentWithTag() scryRenderedComponentsWithType() findRenderedComponentWithType() renderIntoDocument() Simulate

@thevasupodcast4561 Жыл бұрын

Hey i noticed that here you are using a derived state, which is not best practice. You should move the state to a higher level component.

@johnddonnet5151 Ай бұрын

Who uses js in 2023???

@PedroTechnologies Ай бұрын

I make videos in js bc it is more easily understandable by a wider audience. Someone who knows ts, understands js. Whilst someone who knows js doesn't necessarily know ts. If the point of the video is not the ts syntax, I prefer to use javascript since more people can understand it :)

@JohnWickXD Ай бұрын

*I think you meant 2024

@Human_Evolution- 2 жыл бұрын

I cannot reproduce this on my app at all. I hate this video. I hate testing. I watch you all the time and love your channel but testing has me so bitter I am downvoting you.

@christopherfoley4355 Жыл бұрын

lol wow

@thegohmez6816 Жыл бұрын

WOW GRAPE.

@Den1sNovikov 4 ай бұрын

How I suppose to do it with you, if u are not sharing starting demo code?))) Dislike.

@456fghbsrtywrtwre 11 ай бұрын

Awesome video. It has helped me a lot already. There is an issue for later versions. Just add screen.getByTestId instead of getByTestId and you are good to go. For getByRole as well.