No video

React Testing Library Tutorial #11 - Integration Tests

  Рет қаралды 63,936

Net Ninja

Net Ninja

Күн бұрын

Check out Laith's KZfaq channel for more tutorials:
/ @laithacademy
🐱‍💻 Access the course files on GitHub:
github.com/har...
🐱‍👤 Get access to extra premium courses on Net Ninja Pro:
netninja.dev
🐱‍💻 Full React Course:
• Full React Tutorial #1...
🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

Пікірлер: 50
@DGronki
@DGronki 3 жыл бұрын
I like entire course, not because framework but because we have situation like "oh this was unexpected", "it should work". It feels real and not like idealized presentation.
@alanbdee
@alanbdee Жыл бұрын
I just want to thank you for acknowledging when something doesn't go right and you do a quick troubleshoot of it. I think it's important for newer developers to see that things often don't go as we expect no matter how much experience you have.
@anass6625
@anass6625 3 жыл бұрын
To be honest i was a little sceptical about this course, because shawn was not the host, but it turns out really good
@szymonjankowski9481
@szymonjankowski9481 2 жыл бұрын
I tried few Unit testing tutorials and i only get hooked by this one. Comment for algorithm, nice1. I checked your website For extensive Unit testing course but i haven´t found one. I would be up for it with this instructor, Testing some large application while developing features, or sth like this
@Nellak2011
@Nellak2011 2 жыл бұрын
I got to say, at first I was intimidated by the idea of Testing my Code, but after seeing this series, it really isn't that hard after all.
@christopherpierre4886
@christopherpierre4886 Жыл бұрын
lol its definitely still frustrating
@erickgeneric
@erickgeneric 2 жыл бұрын
You’re all doing the Lord’s work.
@pazfelipe
@pazfelipe 3 жыл бұрын
First heeeeeere!!! 6:26 am from brazil
@gradientO
@gradientO 3 жыл бұрын
15:46 from India!
@shivamnayak363
@shivamnayak363 Жыл бұрын
Loved this course.. great job man!!!
@Pspisripoff
@Pspisripoff 2 жыл бұрын
Amazing videos!~Watching on 1.5x speed, but great!
@user-vj5fk6hb3j
@user-vj5fk6hb3j 4 ай бұрын
Better and more safe - use instead of fireEvent - userEvent
@ratishjain2718
@ratishjain2718 10 ай бұрын
Thats why he is the GOAT!! The GOATTT!
@eduard7746
@eduard7746 2 жыл бұрын
More technically speaking, if both of your components are running in the same service, and you are testing their cooperation, then this is a "narrow integration" test. In case if these 2 units of functionalities are in separate autonomous services this can be now called an "integration" test. Please correct me if I am wrong.
@muhammadmehdi1304
@muhammadmehdi1304 3 жыл бұрын
aha Second !. Thank u Sir. When will u start react native app Testing tutorial
@sagarreddy7461
@sagarreddy7461 2 жыл бұрын
thanks laith n shaun.
@pawel6520
@pawel6520 3 жыл бұрын
I am curious why you are using regular expressions over just a string. Is it better in terms of something?
@alessandro2092
@alessandro2092 3 жыл бұрын
Once you start learning regular expressions, you won't go back to strings.
@voltaquake
@voltaquake 2 жыл бұрын
regex allows for case insensitive matching
@mitchell4217
@mitchell4217 5 ай бұрын
Why was I not able to find this easy work around to on the RTL docs? I feel like there's so much missing from it.
@beloaded3736
@beloaded3736 2 жыл бұрын
I watch at 2x but thats how I watch most of the videos, so dont waste time. Laith and Shawn are awesome instuctors ;)
@aaronnolan5377
@aaronnolan5377 2 жыл бұрын
Wow, you must be really smart or something
@subhasishnath3078
@subhasishnath3078 Жыл бұрын
At 15:15 we can check for multiple todo items at once: it('should not have todo-item-active class for a todo-item initially', () => { render(); // We're adding 4 tasks via addTask() addTask(["Go to Store", "Go to Gym", "Do Yoga", "Code all day long"]) const todoItemElements = screen.getAllByTestId('todo-item'); todoItemElements.forEach(todoItemElement => { expect(todoItemElement).not.toHaveClass('todo-item-active'); }) });
@holdmybeaver
@holdmybeaver 2 жыл бұрын
very helpful, thank you!
@tahirahmedt9156
@tahirahmedt9156 3 жыл бұрын
why are the `it` blocks inside describe async? we are not using any find methods right
@mitchell4217
@mitchell4217 5 ай бұрын
Good point. We aren't making any calls or firing any events for the async to be relevant.
@BrainwavesPotential
@BrainwavesPotential 2 жыл бұрын
Wonderful content! I learned a lot with the course, thanks a lot for this and great job!
@bryanltobing
@bryanltobing Жыл бұрын
isn't it better if the last test you put there has a separate unit test specifically for the TodoList component?
@nazirbahrululum2911
@nazirbahrululum2911 3 жыл бұрын
NICE!!
@mohammadmohseni4862
@mohammadmohseni4862 2 жыл бұрын
is very good. Thanks for your very good tutorial 😍
@NetNinja
@NetNinja 2 жыл бұрын
You're welcome 😊
@lovby7439
@lovby7439 2 жыл бұрын
Does anyone here know what he is using to make is so when he clicks a component, it takes you right into that folder. It would save me a lot of time. Thanks Edited :He explained it in the video. You simply press Ctrl and click it. It is an incredibly handy trick.
@alexandraokoro4161
@alexandraokoro4161 2 жыл бұрын
And for mac, it's press option + click component. Also while holding down option and hovering over component, it will give more details about the component.
@uzomanwanne2751
@uzomanwanne2751 Жыл бұрын
Great content. Please, in the course of following the tutorial, I noticed my tests stopped giving me any output and my VS Code kept flickering. I guess there is a memory leakage or issue somewhere as it runs indefinitely with no progress. Any idea on how I can resolve this?
@Saurabhkumar-ps5zp
@Saurabhkumar-ps5zp Жыл бұрын
Thank you
@johanoosthuizen7694
@johanoosthuizen7694 2 жыл бұрын
Great course! Quick question - usually when I write tests I just use 'strings' to identify elements and check values, placeholders, etc. What are the advantages of using regular expressions instead?
@pandu9933
@pandu9933 2 жыл бұрын
Probably that in case the casing etc has changed maybe through css or maybe in future this will be immune to that.
@daniellyaparecidamoreira4943
@daniellyaparecidamoreira4943 Жыл бұрын
i did one diferent test and for one hour i has stocking because give me one error, than i check the code and realize the test is ok the code is wrong ...
@sourishdutta9600
@sourishdutta9600 2 жыл бұрын
This one is so clear but one doubt is if that text actually brings some array of data asynchronously through api then how to wait for to complete??
@Krotau
@Krotau 2 жыл бұрын
You will mock the incoming data using a hard coded value, you are testing the functionality of the component, not if it connects to the API. You use an end-to-end test for testing api connections.
@eleven2435
@eleven2435 2 жыл бұрын
Washing hands is really important, because of COVID! 😁 Sadly it is true! 😞
@Mercio2
@Mercio2 3 жыл бұрын
Thanks!
@romimaximus
@romimaximus 3 жыл бұрын
Man !! this a awesome great video tutorial series, but i have a question ..if i have for example a E-comerce website with 3 pages: products list, product details and a shopping cart page , and i would do 1 integration test for each page ?...im trying figure this out 🤔 thankx 👍
@romimaximus
@romimaximus 3 жыл бұрын
By the way, the videos tutorials on your youtube channel, help me a lot !! Thankx for your great tutorials !!
@matthiaslangbart9841
@matthiaslangbart9841 2 жыл бұрын
Seems you got to be more specific about what it actually is that you want to test, something like: "When I do this And then do that But the global state is ... then I want this to happen: ..." Going that road will clarify a lot---whether you need an integration test or even an E2E-Test and how the test should be written.
@suhasrao4324
@suhasrao4324 Жыл бұрын
Replace forEach loop with for..of loop if you are using an asynchronous userEvent() instead of fireEvent(). And await the addTask function like shown below const addTask = async (tasks) => { const inputElement = screen.getByPlaceholderText(/Add a new task here.../i); const buttonElement = screen.getByRole("button", { name: /Add/i }); const user = userEvent.setup(); for (const task of tasks) { await user.type(inputElement, task); await user.click(buttonElement); } }; .... await addTask(["Go Grocery Shopping", "Wash Hands", "Clean pet"]); .....
@sourabhvaishnav8235
@sourabhvaishnav8235 Жыл бұрын
Why don't you just pause the video making for some time and " Go Grocery Shopping" once. This is something in your Todos since years now.😏
@oubaidaawaw7271
@oubaidaawaw7271 5 ай бұрын
wash your hands bro 🤣
@rafaszewczak9675
@rafaszewczak9675 2 жыл бұрын
Why are you testing for class presence? Why should user care whether some divs in source code have a specific class? I don't know much about testing (that's why I'm watching this), but I have a feeling that this is a crap tutorial.
@IAmBael
@IAmBael 2 жыл бұрын
The class he's testing is the class that makes the text crossed out. It tells the user that this todo task has been completed and they can see that visually if the class is present. So it's a valid thing to test for.
When To Unit, E2E, And Integration Test
14:58
ThePrimeTime
Рет қаралды 95 М.
ROLLING DOWN
00:20
Natan por Aí
Рет қаралды 11 МЛН
王子原来是假正经#艾莎
00:39
在逃的公主
Рет қаралды 18 МЛН
Stop Writing So Many Tests
10:02
Web Dev Simplified
Рет қаралды 88 М.
You might not need useEffect() ...
21:45
Academind
Рет қаралды 158 М.
How I like to test my react components
19:51
Web Dev Cody
Рет қаралды 24 М.
Don’t Do E2E Testing!
17:59
Continuous Delivery
Рет қаралды 154 М.
Thoughts About Unit Testing | Prime Reacts
11:21
ThePrimeTime
Рет қаралды 220 М.
The ONLY REASON To Unit Test
8:26
Theo - t3․gg
Рет қаралды 77 М.
Start Testing In ReactJS - React Testing Library Tutorial
28:04
React Testing Crash Course
58:36
Traversy Media
Рет қаралды 316 М.
Why Vitest Is Better Than Jest
13:13
Web Dev Simplified
Рет қаралды 133 М.
ROLLING DOWN
00:20
Natan por Aí
Рет қаралды 11 МЛН