Video není dostupné.
Omlouváme se.

Testing In React Tutorial - Jest and React Testing Library

Sdílet
Vložit
  • čas přidán 17. 08. 2024
  • 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/l...
    🐙 GraphQL Course: codedamn.com/l...
    ► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
    Social
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    Website: machadopedro.com
    Linkedin: / machadop1407
    Instagram: / _pedro.machado_
    Github: github.com/mac...
    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

Komentáře • 95

  • @selfbrilliance9341
    @selfbrilliance9341 Před 3 měsíci +5

    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 ❤

  • @lokers_one
    @lokers_one Před rokem +37

    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")`.

  • @ArpithaIndira
    @ArpithaIndira Před 16 dny

    It was so confusing for the beginner like me to understand this jest until you run the first test case..after that started understanding it even better..thanks for the work.. continue to grow🙏😊

  • @vandanavishnu1922
    @vandanavishnu1922 Před 2 lety +4

    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..

  • @universecode1101
    @universecode1101 Před 2 lety +12

    Great topic Pedro, super useful for any developer ✌🏻

  • @filipevalentegomes2383
    @filipevalentegomes2383 Před 2 lety +7

    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
      @SharukhKhan-sd7xg Před 2 lety

      Which course are you going to buy?

    • @PedroTechnologies
      @PedroTechnologies  Před 2 lety +4

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

    • @filipevalentegomes2383
      @filipevalentegomes2383 Před 2 lety

      @@PedroTechnologies awesome. Keep up the good work.

    • @SharukhKhan-sd7xg
      @SharukhKhan-sd7xg Před 2 lety

      @@PedroTechnologies yes need that one

    • @filipevalentegomes2383
      @filipevalentegomes2383 Před 2 lety

      @@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

  • @MehediHassan-pn5uc
    @MehediHassan-pn5uc Před 2 lety +9

    Dude you're a underrated Gem! ❤️

  • @ankitkumarsharma2372
    @ankitkumarsharma2372 Před 2 lety +1

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

  • @OPlutarch
    @OPlutarch Před 2 lety +42

    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
      @PedroTechnologies  Před 2 lety +8

      For sure!

    • @omarelgnn7344
      @omarelgnn7344 Před rokem

      @@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

  • @markganser5485
    @markganser5485 Před 2 lety +3

    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!

  • @ometman
    @ometman Před 11 měsíci +1

    Hey Pedro, thanks for making testing basics very simple.

  • @willmann96
    @willmann96 Před rokem +1

    thank you for the clear and concise information.

  • @ThColinPereira
    @ThColinPereira Před 2 lety +2

    Great video Pedro! Super helpful

  • @chaitanyasawant776
    @chaitanyasawant776 Před 2 lety +1

    Great topic. Make more videos on this topic

  • @NikhilPawar151
    @NikhilPawar151 Před 8 měsíci

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

  • @SinaTajik
    @SinaTajik Před rokem

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

  • @travelglobe8997
    @travelglobe8997 Před 9 měsíci

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

  • @tootyrnt5533
    @tootyrnt5533 Před 9 měsíci +1

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

  • @ggwellplayed4568
    @ggwellplayed4568 Před 2 lety +2

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

  • @psydook
    @psydook Před 2 lety +4

    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 !

  • @mysoregopinathshantanu8800

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

  • @antidotejack2771
    @antidotejack2771 Před 9 dny

    this is great, Thanks

  • @bananablu47
    @bananablu47 Před 2 lety +1

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

  • @graycoder9911
    @graycoder9911 Před 8 měsíci +1

    I only know of two great developers Ben awad and pedrotech

  • @parvathyvd
    @parvathyvd Před 2 lety

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

  • @rodrigocastro3934
    @rodrigocastro3934 Před 10 měsíci

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

  • @DaltonLaboratories
    @DaltonLaboratories Před 9 měsíci +1

    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!

  • @LeslieDuan
    @LeslieDuan Před 2 lety

    thank you so much, hope to see tutorial about cypress

  • @amanjat7
    @amanjat7 Před 3 měsíci

    Helpful

  • @neverexecute2467
    @neverexecute2467 Před 2 lety

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

  • @karis7539
    @karis7539 Před 2 lety

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

  • @santhoshkashyap9405
    @santhoshkashyap9405 Před 12 dny

    Thank you ;)

  • @waleedsharif618
    @waleedsharif618 Před 2 lety +1

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

  • @turing4991
    @turing4991 Před 2 lety

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

  • @mohitdhule9654
    @mohitdhule9654 Před 2 lety +1

    Thank you 🙏

  • @GlennMartin
    @GlennMartin Před 2 lety

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

  • @sodhigurpreetsingh
    @sodhigurpreetsingh Před 2 lety

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

  • @salonipande6190
    @salonipande6190 Před rokem

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

  • @JaredFL
    @JaredFL Před 2 lety

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

  • @christianlewis7055
    @christianlewis7055 Před rokem

    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. 😄

  • @dylanheslop9161
    @dylanheslop9161 Před 8 měsíci

    how can this be done with ts and vite

  • @tsdineshjai8565
    @tsdineshjai8565 Před 2 lety +1

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

  • @brilliantatosam
    @brilliantatosam Před 2 lety

    Awesome content

  • @drawingdr9829
    @drawingdr9829 Před 2 lety

    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

  • @kranthikumar5215
    @kranthikumar5215 Před rokem

    Love you pedro❤

  • @harishg9429
    @harishg9429 Před 2 lety +1

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

    • @PedroTechnologies
      @PedroTechnologies  Před 2 lety +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
      @harishg9429 Před 2 lety

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

  • @xman3666
    @xman3666 Před rokem

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

  • @rockndesign
    @rockndesign Před 2 lety

    Thanks your video!!!

  • @Popo-hr6gc
    @Popo-hr6gc Před rokem

    What VSCode theme are u using?

  • @azizkhujakhujaev2598
    @azizkhujakhujaev2598 Před 2 lety

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

  • @robertvelasquez8641
    @robertvelasquez8641 Před rokem

    what if i use vite?

  • @ankitchauhan8682
    @ankitchauhan8682 Před rokem

    How is he using jsx with. Js extension?

  • @internetexplorer7880
    @internetexplorer7880 Před 2 lety

    What vscode theme is this?

  • @shishirrai1069
    @shishirrai1069 Před 2 lety

    Please make video on jest and enzyme

  • @karthikbalaji383
    @karthikbalaji383 Před 2 lety

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

  • @suvendukumarsahoo4172

    He can u have idea testing for post api

  • @primy3576
    @primy3576 Před 2 lety

    vs code theme?

  • @cometarioxD
    @cometarioxD Před 2 lety

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

  • @patrykK1028
    @patrykK1028 Před rokem

    There's no link to the code :/

  • @ranza658
    @ranza658 Před 2 lety

    Is source code available for this video?

  • @bradenmitchell3265
    @bradenmitchell3265 Před 2 lety +1

    Deja vu @ 13:09?

    • @PedroTechnologies
      @PedroTechnologies  Před 2 lety

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

  • @gmmkeshav
    @gmmkeshav Před rokem

    code of this video?

  • @WydeZ
    @WydeZ Před rokem

    where is the code

  • @demarbrown439
    @demarbrown439 Před 10 měsíci

    13:00

  • @reactDevelopment
    @reactDevelopment Před rokem

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

  • @arihantjain8347
    @arihantjain8347 Před rokem

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

  • @thevasupodcast4561
    @thevasupodcast4561 Před 2 lety +1

    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
    @johnddonnet5151 Před 3 měsíci

    Who uses js in 2023???

    • @PedroTechnologies
      @PedroTechnologies  Před 3 měsíci +2

      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
      @JohnWickXD Před 2 měsíci

      *I think you meant 2024

  • @Den1sNovikov
    @Den1sNovikov Před 6 měsíci

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

  • @Human_Evolution-
    @Human_Evolution- Před 2 lety

    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.

  • @456fghbsrtywrtwre
    @456fghbsrtywrtwre Před rokem

    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.