React Testing Tutorial (Jest + React Testing Library)

  Рет қаралды 245,592

Kris Foster

Kris Foster

3 жыл бұрын

Learn how to write unit tests for your React components using Jest and the React Testing Library.
We will be writing some unit tests for React components using the Jest framework (jestjs.io/). We will begin by creating a react app using create-react-app. Then we will create a component & write some unit tests for it. We will finish by writing some snapshot tests to verify changes to the component tree.
Don't forget to Subscribe here: / @krisfoster1

Пікірлер: 132
@marciocamollez7062
@marciocamollez7062 2 жыл бұрын
Simply the best explanation from entire KZfaq. I'm studying react from 2 years and test library was the worst part to find some good videos. Congrats!
@skyhawksp
@skyhawksp 3 жыл бұрын
The most useful react jest testing tutorial video currently on KZfaq. Thank you!
@andersonsimeon4172
@andersonsimeon4172 4 ай бұрын
For a 3 years ago video, this is high quality staright to the point content. Thanks Man
@peacekper
@peacekper 8 ай бұрын
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
@JuaNeMe 3 жыл бұрын
Excellent video! I have been waiting a video like this with React Testing in an useful way for a long time.
@KrisFoster1
@KrisFoster1 3 жыл бұрын
That's great, thank you for the feedback @juan ocho!
@SoftwareSimplified-Dtons
@SoftwareSimplified-Dtons 10 ай бұрын
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');
@christonit6895
@christonit6895 2 жыл бұрын
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
@KrisFoster1 2 жыл бұрын
Glad you enjoyed the video!
@Whiskey0
@Whiskey0 Жыл бұрын
Great tutorial mate, would love to see a more complicated test suite on a component that is using redux!
@seriouslee4119
@seriouslee4119 Жыл бұрын
Bru, your voice is so soothing. I'm rewatching this video tonight instead of ASMR lol.
@carlosg8716
@carlosg8716 2 жыл бұрын
Excellent video. I went from zero to added to my projects in 22 minutes and 15 seconds
@jackstorm777
@jackstorm777 Жыл бұрын
Excellent tutorial, lots of good info in 20 minutes!
@rupeshmody8901
@rupeshmody8901 Жыл бұрын
Very simple and so far the best. Thank you.
@chenyangwang1930
@chenyangwang1930 Жыл бұрын
Perfect tutorial! Really easy to understand
@gnumanoj
@gnumanoj 2 жыл бұрын
most useful video so far ! :) Thank you!
@martinharyanto4465
@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 👍
@mahmoudhamdy819
@mahmoudhamdy819 7 ай бұрын
thank you so much for great and brief react test explanation
@joseff5998
@joseff5998 Жыл бұрын
Thanks for clear and simple explanation.
@khandoor7228
@khandoor7228 3 жыл бұрын
please do more with testing!
@gina7898
@gina7898 Жыл бұрын
This was so helpful. Thank you!
@EminoMeneko
@EminoMeneko 3 жыл бұрын
Nice quick start.
@arunimaroy4383
@arunimaroy4383 Жыл бұрын
toContainHtml method expects to pass html tag as a string without tag notaion so you need to replace '' with 'strike'.
@MrAndykofi
@MrAndykofi 2 жыл бұрын
Excellent, thanks a lot, was good to watch.
@MietekPomywacz
@MietekPomywacz Жыл бұрын
Very good video, explained in a simple way :)
@jaceborg
@jaceborg 3 жыл бұрын
Great video, really well explained, thanks :)
@aaronmatto1375
@aaronmatto1375 2 жыл бұрын
Amazing video. Thank you!
@alainhonorekubwayo8819
@alainhonorekubwayo8819 Жыл бұрын
Excellent tutorial!
@sureshanands
@sureshanands 3 жыл бұрын
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 ❤️👍
@harelweingarten
@harelweingarten Жыл бұрын
Great tutorial , TNX.
@josephcobbinah5412
@josephcobbinah5412 Жыл бұрын
Great stuff man!!
4 ай бұрын
awesome content , thank you very much your time.
@charithamila9194
@charithamila9194 3 жыл бұрын
Thanks a lot. Very helpful
@spytyler
@spytyler 3 жыл бұрын
Great video. Very helpful
@marvinotieno2194
@marvinotieno2194 5 ай бұрын
This video is really good
@user-gc5wf1rg6h
@user-gc5wf1rg6h 9 ай бұрын
Thank you so much!
@sukhsingh7057
@sukhsingh7057 2 жыл бұрын
Great guide!
@todaysrapsux123
@todaysrapsux123 3 жыл бұрын
thank you! subscribed!
@cristoslaher
@cristoslaher 2 жыл бұрын
Great! Really helpful
@nusskugeldingsi
@nusskugeldingsi 2 жыл бұрын
Nice overview of testing with Jest in React! BTW the Todo component inside the map loop is missing a key prop. ;)
@I3uzzzzzz
@I3uzzzzzz 2 жыл бұрын
ur life is missing a dad ;)
@oliver1231033
@oliver1231033 3 жыл бұрын
awesome content, thank you!
@KrisFoster1
@KrisFoster1 3 жыл бұрын
Glad you enjoyed!
@smhmkkh
@smhmkkh 2 жыл бұрын
Thank you, that was great. The only part i didn’t understand was what is snapshot
@lyndontan1561
@lyndontan1561 3 жыл бұрын
Perfect time and a perfect example thank you!!!! from PH please do more sample like using hooks State T.I.A
@KrisFoster1
@KrisFoster1 3 жыл бұрын
Thank you for the feedback!
@mauroinde
@mauroinde Жыл бұрын
new subscriber, clear class
@bautista-cutraro
@bautista-cutraro 3 жыл бұрын
Great video!
@marcelhumes1360
@marcelhumes1360 Жыл бұрын
Thank you Kris.
@adityanair1001
@adityanair1001 2 жыл бұрын
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.
@dinidulochana3295
@dinidulochana3295 2 жыл бұрын
Great content!! Thank you.
@KrisFoster1
@KrisFoster1 2 жыл бұрын
Thank you!
@user-cs4nu4ch3l
@user-cs4nu4ch3l 10 ай бұрын
Nice hi Kris, From Ireland too
@Saje3l
@Saje3l 2 жыл бұрын
Totally Awesome!!!
@BarbarosYurttagul
@BarbarosYurttagul 2 ай бұрын
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.
@damo190
@damo190 3 жыл бұрын
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
@KrisFoster1 3 жыл бұрын
I made some videos a while back on some of those technologies: cypress - m.kzfaq.info/get/bejne/rdV5Z5xhrbixY2g.html mocha/chai - m.kzfaq.info/get/bejne/fLF_pteD1924Zas.html
@vadirajkanakagiri5028
@vadirajkanakagiri5028 Жыл бұрын
I'm getting the error as SyntaxError: Cannot use import statement outside a module, can you please help me with this
@554-manjushriparkhe4
@554-manjushriparkhe4 2 жыл бұрын
Thank you so much for this vedio great vedio
@HeshamElQuerm
@HeshamElQuerm 2 жыл бұрын
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?
@ManishKumar-mi7ko
@ManishKumar-mi7ko 3 жыл бұрын
thank you so much
@himallimbu007
@himallimbu007 2 жыл бұрын
toContainHTML function is not working properly, can you please help?
@aanandantma9573
@aanandantma9573 2 жыл бұрын
Are you using any extension for jest intellisense?
@AhmadMaartmesrini
@AhmadMaartmesrini 5 ай бұрын
thank you
@lekkyjayz6294
@lekkyjayz6294 3 жыл бұрын
Can you make a tutorial about react redux unit testing?
@aprimic
@aprimic 2 жыл бұрын
in what circumstance will the snapshot not match?
@awefawefwaef
@awefawefwaef Жыл бұрын
what window manager are you using?
@cloudsss83
@cloudsss83 Жыл бұрын
you should create more tuts... you`re good. thanks
@patrickackom952
@patrickackom952 Жыл бұрын
how do you test apps with usecontext and api calls in them
@flying-musk
@flying-musk 13 күн бұрын
12:10 is tag still used for now?
@saraswathijampala510
@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.
@oleksandrhusiev6544
@oleksandrhusiev6544 2 жыл бұрын
Top, thanks!
@KrisFoster1
@KrisFoster1 2 жыл бұрын
Glad you enjoyed!
@maxdev6347
@maxdev6347 5 ай бұрын
Which node version you use
@bhaskardas3777
@bhaskardas3777 2 жыл бұрын
U are awesome.
@jeff2000wu
@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.
@gmmkeshav
@gmmkeshav Жыл бұрын
what if we want to have more folders in __tests__ ?
@poenaeco
@poenaeco 3 жыл бұрын
What is the extension you are using in the console? Thanks for the tutorial btw.
@poenaeco
@poenaeco 3 жыл бұрын
I mean for the GIT.
@KrisFoster1
@KrisFoster1 3 жыл бұрын
Hi @poenaeco, it's called ohmyzsh. I find it very useful. Here's a link with steps to install ohmyz.sh/
@poenaeco
@poenaeco 3 жыл бұрын
@@KrisFoster1 Thanks for the reply.
@mybaby2262
@mybaby2262 2 жыл бұрын
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
@danieltkach2330
@danieltkach2330 Жыл бұрын
I'm using Vite and not CRA, so the script for test does not exist, how do I set it up?
@akunduru4
@akunduru4 3 жыл бұрын
Thanks for the video. How do we get that back quote in the VSC in the data-testid={'todo-${id}'} ?
@MohamedElamir3
@MohamedElamir3 3 жыл бұрын
the button under the Esc button
@nicolasgomez5207
@nicolasgomez5207 Жыл бұрын
``
@ainneo
@ainneo 2 жыл бұрын
it there a git repo for this?
@grumly85
@grumly85 Жыл бұрын
I've got pink panther in my head now with all these 'todo, todo, todo,...' Nice tutorial still
@KrisFoster1
@KrisFoster1 Жыл бұрын
Thank you!
@juhandvan
@juhandvan 2 жыл бұрын
thanks
@KrisFoster1
@KrisFoster1 2 жыл бұрын
Glad you enjoyed!
@paviyarasanv4192
@paviyarasanv4192 Жыл бұрын
Can you please upload. how to test redux login page
@ZawWLwin-jo7dc
@ZawWLwin-jo7dc 3 жыл бұрын
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
@KrisFoster1 3 жыл бұрын
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
@137dylan 2 жыл бұрын
@@KrisFoster1 Even Kent Dodds said he rarely goes full TDD and prefers to use a more iterative approach
@jackstorm777
@jackstorm777 Жыл бұрын
TDD is an unattainable ideal, like world peace or eternal youth, it's nice to think about but will never EVER happen :)
@timdanielewski8036
@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.
@Leo-bl3ge
@Leo-bl3ge 3 жыл бұрын
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
@vin2629
@vin2629 Жыл бұрын
Need a more advanced tutorial where the API calls are mocked
@jeanlaguna6949
@jeanlaguna6949 2 жыл бұрын
nice tutorial. Just one thing.... toContainHTML receive just the name of the tag without the ""
@TlbHibiki
@TlbHibiki Жыл бұрын
I was just going through this tutorial and I had this issue with toContainHTML not liking and should be changed to remove the .
@coolpythoncodes5768
@coolpythoncodes5768 2 жыл бұрын
🚀🚀🚀
@deathmetal0073
@deathmetal0073 Жыл бұрын
Kewl
@Daniel__g12
@Daniel__g12 16 күн бұрын
Get the lowdown on future developments in an exclusive interview with Binance's CEO
@Steel0079
@Steel0079 2 жыл бұрын
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
@BumLowkey 2 жыл бұрын
try replace "" by "strike", I think different versions
@lekkyjayz6294
@lekkyjayz6294 3 жыл бұрын
Instead of: import renderer from 'react-test-renderer' use: import TestRenderer from 'react-test-renderer'
@willemkapenda2107
@willemkapenda2107 3 жыл бұрын
Thank you very much for this
@PierreLaBaguette
@PierreLaBaguette 2 жыл бұрын
why?
@aprimic
@aprimic 2 жыл бұрын
you have the voice of Ross from friends, not the accent though
@KrisFoster1
@KrisFoster1 2 жыл бұрын
😂
@iliketocode6986
@iliketocode6986 3 жыл бұрын
So annoying how they change the api
@ax3lgarcia675
@ax3lgarcia675 Жыл бұрын
why sompeople speak about .babelrc or babel.config.js ? you don't speak about that
@PierreLaBaguette
@PierreLaBaguette 2 жыл бұрын
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
@jackstorm777 Жыл бұрын
It's a course on unit testing, not HTML best practices :)
@PierreLaBaguette
@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
@jerodnilstead5985 Жыл бұрын
nice tutorial, back up from the mic a bit, hearing your mouth function is quite unpleasant.
@NavySturmGewehr
@NavySturmGewehr Жыл бұрын
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-
@Human_Evolution- 2 жыл бұрын
Not a fan of the const H1 stuff. Nope. And I hate tests. I think I hate every testing video on KZfaq.
@paridokhtalavinia
@paridokhtalavinia 2 жыл бұрын
Hi, thank you for this video, but expect(todoElement).toContainHTML('') is not working seems it should be expect(todoElement).toMatchSnapshot('');
@filcondrat
@filcondrat 2 жыл бұрын
yep
@Shaktish-kumar
@Shaktish-kumar 2 жыл бұрын
expect(todoElement).toContainHTML('strike'); This worked, use only the html tag name
@anmolgupta1407
@anmolgupta1407 3 жыл бұрын
Hi, Can I have your email id? It was not mentioned inside the 'About' section of your channel.
@456fghbsrtywrtwre
@456fghbsrtywrtwre Жыл бұрын
Nice explanation. Although expect(todoElement).not.toContainHTML(''); this test does not work.
@IncolasCopperfield
@IncolasCopperfield 2 жыл бұрын
thank you
Тестирование React приложения
1:03:02
Михаил Непомнящий
Рет қаралды 63 М.
React Testing for Beginners: Start Here!
1:17:14
Programming with Mosh
Рет қаралды 82 М.
Red❤️+Green💚=
00:38
ISSEI / いっせい
Рет қаралды 87 МЛН
WORLD'S SHORTEST WOMAN
00:58
Stokes Twins
Рет қаралды 108 МЛН
Alex hid in the closet #shorts
00:14
Mihdens
Рет қаралды 16 МЛН
Testing In React Tutorial - Jest and React Testing Library
21:28
Test-Driven Development // Fun TDD Introduction with JavaScript
12:55
Jest Crash Course - Learn How to Test your JavaScript Application
1:06:53
Why Vitest Is Better Than Jest
13:13
Web Dev Simplified
Рет қаралды 131 М.
Cypress Testing with React - Simple Tutorial
12:43
Cosden Solutions
Рет қаралды 41 М.
The ONLY REASON To Unit Test
8:26
Theo - t3․gg
Рет қаралды 75 М.
Stop Writing So Many Tests
10:02
Web Dev Simplified
Рет қаралды 85 М.
React Testing Crash Course
58:36
Traversy Media
Рет қаралды 315 М.
Create react projects
22:33
Hitesh Choudhary
Рет қаралды 40 М.
iPhone socket cleaning #Fixit
0:30
Tamar DB (mt)
Рет қаралды 18 МЛН
Xiaomi SU-7 Max 2024 - Самый быстрый мобильник
32:11
Клубный сервис
Рет қаралды 538 М.
iPhone 15 Pro в реальной жизни
24:07
HUDAKOV
Рет қаралды 482 М.
Проверил, как вам?
0:58
Коннор
Рет қаралды 257 М.
Запрещенный Гаджет для Авто с aliexpress 2
0:50
Тимур Сидельников
Рет қаралды 955 М.
НОВЫЕ ФЕЙК iPHONE 🤯 #iphone
0:37
ALSER kz
Рет қаралды 357 М.