React Testing Library Tutorial #11 - Integration Tests

[@DGronki]

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]

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]

To be honest i was a little sceptical about this course, because shawn was not the host, but it turns out really good

[@Nellak2011]

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]

lol its definitely still frustrating

[@erickgeneric]

You’re all doing the Lord’s work.

[@pazfelipe]

First heeeeeere!!! 6:26 am from brazil

[@gradientO]

15:46 from India!

[@shivamnayak363]

Loved this course.. great job man!!!

[@szymonjankowski9481]

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

[@eduard7746]

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.

[@pawel6520]

I am curious why you are using regular expressions over just a string. Is it better in terms of something?

[@alessandro2092]

Once you start learning regular expressions, you won't go back to strings.

[@voltaquake]

regex allows for case insensitive matching

[@Pspisripoff]

Amazing videos!~Watching on 1.5x speed, but great!

[@ratishjain2718]

Thats why he is the GOAT!! The GOATTT!

[@tahirahmedt9156]

why are the `it` blocks inside describe async? we are not using any find methods right

[@mitchell4217]

Good point. We aren't making any calls or firing any events for the async to be relevant.

[@sagarreddy7461]

thanks laith n shaun.

[@mitchell4217]

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.

[@bryanprimus]

isn't it better if the last test you put there has a separate unit test specifically for the TodoList component?

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

[@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'); }) });

[@johanoosthuizen7694]

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]

Probably that in case the casing etc has changed maybe through css or maybe in future this will be immune to that.

[@FigmaTemplate]

Better and more safe - use instead of fireEvent - userEvent

[@sourishdutta9600]

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]

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.

[@muhammadmehdi1304]

aha Second !. Thank u Sir. When will u start react native app Testing tutorial

[@mohammadmohseni4862]

is very good. Thanks for your very good tutorial 😍

[@NetNinja]

You're welcome 😊

[@beloaded3736]

I watch at 2x but thats how I watch most of the videos, so dont waste time. Laith and Shawn are awesome instuctors ;)

[@aaronnolan5377]

Wow, you must be really smart or something

[@lovby7439]

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]

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.

[@BrainwavesPotential]

Wonderful content! I learned a lot with the course, thanks a lot for this and great job!

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

[@romimaximus]

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]

By the way, the videos tutorials on your youtube channel, help me a lot !! Thankx for your great tutorials !!

[@matthiaslangbart9841]

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.

[@Saurabhkumar-ps5zp]

Thank you

[@nazirbahrululum2911]

NICE!!

[@eleven2435]

Washing hands is really important, because of COVID! 😁 Sadly it is true! 😞

[@Mercio2]

Thanks!

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

wash your hands bro 🤣

[@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"]); .....

[@rafaszewczak9675]

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]

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.