React Testing Tutorial (Jest + React Testing Library)

[@marciocamollez7062]

Simply the best explanation from entire KZbin. I'm studying react from 2 years and test library was the worst part to find some good videos. Congrats!

[@andersonsimeon4172]

For a 3 years ago video, this is high quality staright to the point content. Thanks Man

[@SoftwareSimplified-Dtons]

Thank you Kris for the wonderful learning videos . Just a small suggestion. The test was failing with '' so at 16:44 please change from expect(todoElement).toContainHTML(''); to expect(todoElement).toContainHTML('strike');

[@skyhawksp]

The most useful react jest testing tutorial video currently on KZbin. Thank you!

[@christonit6895]

Uff thanks man! I have been all day reading the jest and react docs and wasn't understanding how to use these techs XD you just teched me how to properly unit test my UI lib.

[@KrisFoster1]

Glad you enjoyed the video!

[@peacekper]

Thank you so much for this tutorial! I would agree with the other comments too about seeing a more involved testing suite using a state library. But this was by far the best video I've seen on using jest. Keep the videos coming

[@JuaNeMe]

Excellent video! I have been waiting a video like this with React Testing in an useful way for a long time.

[@KrisFoster1]

That's great, thank you for the feedback @juan ocho!

[@seriouslee4119]

Bru, your voice is so soothing. I'm rewatching this video tonight instead of ASMR lol.

[@arunimaroy4383]

toContainHtml method expects to pass html tag as a string without tag notaion so you need to replace '' with 'strike'.

[@carlosg8716]

Excellent video. I went from zero to added to my projects in 22 minutes and 15 seconds

[@vadirajkanakagiri5028]

I'm getting the error as SyntaxError: Cannot use import statement outside a module, can you please help me with this

[@himallimbu007]

toContainHTML function is not working properly, can you please help?

[@khandoor7228]

please do more with testing!

[@BarbarosYurttagul]

Hi Kris, thanks for the video. 21:26 How did you manage to reduce the test execution speed from 2+ seconds to 0.666 seconds? I did the same steps but mine didn't change.

[@martinharyanto4465]

Hi Kris ! thanks for explanation, I know this video is 2 years old, is it possible for you to re-explain it with current state of Jest + React Testing Library? Probably some improvement here and there? And maybe you could help to explain about testing user event + mocking child component inside the component being tested. Thanks ! This is a very simple and great tutorial 👍

[@rupeshmody8901]

Very simple and so far the best. Thank you.

[@EminoMeneko]

Nice quick start.

[@nusskugeldingsi]

Nice overview of testing with Jest in React! BTW the Todo component inside the map loop is missing a key prop. ;)

[@I3uzzzzzz]

ur life is missing a dad ;)

[@flying-musk]

12:10 is tag still used for now?

[@mahmoudhamdy819]

thank you so much for great and brief react test explanation

[@chenyangwang1930]

Perfect tutorial! Really easy to understand

[@saraswathijampala510]

HI.............the node version u used is 14 r 16........? Please share me i tried in both version 14 and 16 but its not working.

[@HeshamElQuerm]

Good video, but why did you `mock` the props in the test file? Isn't there a more elegant way to get the real props that are passed to the component?

[@jackstorm777]

Excellent tutorial, lots of good info in 20 minutes!

[@danieltkach2330]

I'm using Vite and not CRA, so the script for test does not exist, how do I set it up?

[@gnumanoj]

most useful video so far ! :) Thank you!

[@josephcobbinah5412]

Great stuff man!!

[@gmmkeshav]

what if we want to have more folders in __tests__ ?

[@joseff5998]

Thanks for clear and simple explanation.

[@awefawefwaef]

what window manager are you using?

[@patrickackom952]

how do you test apps with usecontext and api calls in them

[@jeff2000wu]

getting an error for this line: import renderer from 'react-test-renderer'; I install the package by npm install react-test-render , anyone know.

[@MietekPomywacz]

Very good video, explained in a simple way :)

[@maxdev6347]

Which node version you use

[@PilipalaOnEarth]

Thank you! It's very helpful to me.

[@zaw_w_lwin]

The usual flow for TDD is to write the test first, watch it fail, and make a minimal effort to get it right and then refactor. But anyway, greate video.

[@KrisFoster1]

Thank you for the feedback @Zaw W. Lwin, TDD is just one approach to take. This tutorial is not on TDD but just on how to test react components.

[@137dylan]

@@KrisFoster1 Even Kent Dodds said he rarely goes full TDD and prefers to use a more iterative approach

[@jackstorm777]

TDD is an unattainable ideal, like world peace or eternal youth, it's nice to think about but will never EVER happen :)

[@timdanielewski8036]

​@@jackstorm777oh it's real! Maybe they call it extreme programming because it's extremely rare. I stumbled into a team of 8 developers that pair program and swap partners everyday. Not one line of code was written with out a test existing first. One of the funnest things I've ever been a part of.

[@adityanair1001]

Thanks bruh ❤️ Can u make more of these vedios How how to test for the data in a component which we r getting from api.

[@aanandantma9573]

Are you using any extension for jest intellisense?

[@mybaby2262]

How to write a test cases for big component lets say I have component with big business logic how could I write test cases for that

[@aprimic]

in what circumstance will the snapshot not match?

[@lyndontan1561]

Perfect time and a perfect example thank you!!!! from PH please do more sample like using hooks State T.I.A

[@KrisFoster1]

Thank you for the feedback!

[@sureshanands]

Bro can yu make videos for async methods RTL testing. Some other examples which helps real time project experience. This video is also good . If you make those tht would be best ❤️👍

[@smhmkkh]

Thank you, that was great. The only part i didn’t understand was what is snapshot

[@damo190]

Thanks for this video bro. Will u start a video series on Reactjs testing just like using, mocha, chai, cypress, knightwatchJs, jasmine, karma, react testing library, etc?

[@KrisFoster1]

I made some videos a while back on some of those technologies: cypress - m.kzbin.info/www/bejne/raCsZWxmfbeAaZY mocha/chai - m.kzbin.info/www/bejne/fHyypKeIp9yHa9k

[@poenaeco]

What is the extension you are using in the console? Thanks for the tutorial btw.

[@poenaeco]

I mean for the GIT.

[@KrisFoster1]

Hi @poenaeco, it's called ohmyzsh. I find it very useful. Here's a link with steps to install ohmyz.sh/

[@poenaeco]

@@KrisFoster1 Thanks for the reply.

[@gina7898]

This was so helpful. Thank you!

[@alainhonorekubwayo8819]

Excellent tutorial!

[@harelweingarten]

Great tutorial , TNX.

[@MrAndykofi]

Excellent, thanks a lot, was good to watch.

[@ainneo]

it there a git repo for this?

[@554-manjushriparkhe4]

Thank you so much for this vedio great vedio

[@parid0khtt]

Hi, thank you for this video, but expect(todoElement).toContainHTML('') is not working seems it should be expect(todoElement).toMatchSnapshot('');

[@filcondrat]

yep

[@Shaktish-kumar]

expect(todoElement).toContainHTML('strike'); This worked, use only the html tag name

[@lekkyjayz6294]

Can you make a tutorial about react redux unit testing?

awesome content , thank you very much your time.

[@mauroinde]

new subscriber, clear class

[@akunduru4]

Thanks for the video. How do we get that back quote in the VSC in the data-testid={'todo-${id}'} ?

[@MohamedElamir3]

the button under the Esc button

[@nicolasgomez5207]

``

[@marvinotieno2194]

This video is really good

[@LeanneLacey-Byrne]

Nice hi Kris, From Ireland too

[@grumly85]

I've got pink panther in my head now with all these 'todo, todo, todo,...' Nice tutorial still

[@KrisFoster1]

Thank you!

[@sukhsingh7057]

Great guide!

[@jaceborg]

Great video, really well explained, thanks :)

[@spytyler]

Great video. Very helpful

[@dinidulochana3295]

Great content!! Thank you.

[@KrisFoster1]

Thank you!

[@marcelhumes1360]

Thank you Kris.

[@cloudsss83]

you should create more tuts... you`re good. thanks

[@bautista-cutraro]

Great video!

[@cristoslaher]

Great! Really helpful

[@Leo-bl3ge]

Why does my simple tests take so long? A simple expect(true).toBe(true) takes(2ms) but Time was 3s (yours was 1s) Edit: I was able to make it 1.9s with --maxWorkers=50%, but idk if there's more to do

[@charithamila9194]

Thanks a lot. Very helpful

[@oliver1231033]

awesome content, thank you!

[@KrisFoster1]

Glad you enjoyed!

[@Saje3l]

Totally Awesome!!!

[@todaysrapsux123]

thank you! subscribed!

[@vin2629]

Need a more advanced tutorial where the API calls are mocked

[@FelipePereiradaSilva-q7f]

Thank you so much!

[@paviyarasanv4192]

Can you please upload. how to test redux login page

[@Steel0079]

Thanks for taking the time to make the video on the topic. I am running into a problem, near 17:07, where you place the below line of code in both tests. expect(todoElement).toContainHTML("") I get the error saying expect(element).toContainHTML() Expected: Received: Make dinner Can you please tell me why it isn't working for me?

[@BumLowkey]

try replace "" by "strike", I think different versions

[@lekkyjayz6294]

Instead of: import renderer from 'react-test-renderer' use: import TestRenderer from 'react-test-renderer'

[@willemkapenda2107]

Thank you very much for this

[@PierreLaBaguette]

why?

[@jeanlaguna6949]

nice tutorial. Just one thing.... toContainHTML receive just the name of the tag without the ""

[@TlbHibiki]

I was just going through this tutorial and I had this issue with toContainHTML not liking and should be changed to remove the .

[@oleksandrhusiev6544]

Top, thanks!

[@KrisFoster1]

Glad you enjoyed!

[@bhaskardas3777]

U are awesome.

[@ManishKumar-mi7ko]

thank you so much

[@IncolasCopperfield]

thank you

[@Daniel__g12]

Get the lowdown on future developments in an exclusive interview with Binance's CEO

[@ax3lgarcia675]

why sompeople speak about .babelrc or babel.config.js ? you don't speak about that

[@coolpythoncodes5768]

🚀🚀🚀

[@juhandvan]

thanks

[@KrisFoster1]

Glad you enjoyed!

[@aprimic]

you have the voice of Ross from friends, not the accent though

[@KrisFoster1]

😂

[@iliketocode6986]

So annoying how they change the api

[@PierreLaBaguette]

my 2 cents - I believe that a to-do item would typically be an item in a list, therefore don't use DIV tag but LI (list item). it will also help your accessibility efforts and spread good practices and love :) edit: the same with the h1 element use - h1 is a main header of a page, Header level 1. pages should typically have only one element like that. why not use just P, Span or Strong instead? (check udacity course about Web Accessibility) + I'd love to see how you test state changes of elements, especially of parent and child element, each of them having co-related states

[@jackstorm777]

It's a course on unit testing, not HTML best practices :)

[@PierreLaBaguette]

@@jackstorm777 (bad) habits have high chances of becoming the default way of doing things. one might forget the good practices if they don't get applied when possible

[@jerodnilstead5985]

nice tutorial, back up from the mic a bit, hearing your mouth function is quite unpleasant.

[@deathmetal0073]

Kewl

[@NavyCuda]

The lip smacking is just terrible. Why do people do that? I really want to watch your content but the lip smacking just drives me insane. It is so avoidable, it's like people don't take the time to listen to their audio before posting.

[@Human_Evolution-]

Not a fan of the const H1 stuff. Nope. And I hate tests. I think I hate every testing video on KZbin.

[@anmolgupta1407]

Hi, Can I have your email id? It was not mentioned inside the 'About' section of your channel.

[@LS9690]

Nice explanation. Although expect(todoElement).not.toContainHTML(''); this test does not work.

[@aaronmatto1375]

Amazing video. Thank you!

[@AhmadMaartmesrini]

thank you