React Testing Library Tutorial #11 - Integration Tests
ฝัง
- เผยแพร่เมื่อ 13 ก.ค. 2021
- Check out Laith's TH-cam channel for more tutorials:
/ @laithacademy
🐱💻 Access the course files on GitHub:
github.com/harblaith7/React-T...
🐱👤 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
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.
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.
To be honest i was a little sceptical about this course, because shawn was not the host, but it turns out really good
Loved this course.. great job man!!!
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
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.
Amazing videos!~Watching on 1.5x speed, but great!
very helpful, thank you!
Wonderful content! I learned a lot with the course, thanks a lot for this and great job!
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.
lol its definitely still frustrating
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?
isn't it better if the last test you put there has a separate unit test specifically for the TodoList component?
You’re all doing the Lord’s work.
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?
Probably that in case the casing etc has changed maybe through css or maybe in future this will be immune to that.
aha Second !.
Thank u Sir.
When will u start react native app Testing tutorial
thanks laith n shaun.
is very good.
Thanks for your very good tutorial 😍
You're welcome 😊
Thats why he is the GOAT!! The GOATTT!
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.
Better and more safe - use instead of fireEvent - userEvent
I am curious why you are using regular expressions over just a string. Is it better in terms of something?
Once you start learning regular expressions, you won't go back to strings.
regex allows for case insensitive matching
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??
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.
why are the `it` blocks inside describe async? we are not using any find methods right
Good point. We aren't making any calls or firing any events for the async to be relevant.
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.
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.
NICE!!
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 ...
First heeeeeere!!! 6:26 am from brazil
15:46 from India!
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');
})
});
Thank you
Thanks!
I watch at 2x but thats how I watch most of the videos, so dont waste time. Laith and Shawn are awesome instuctors ;)
Wow, you must be really smart or something
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 👍
By the way, the videos tutorials on your youtube channel, help me a lot !! Thankx for your great tutorials !!
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.
Washing hands is really important, because of COVID! 😁
Sadly it is true! 😞
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"]);
.....
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.😏
wash your hands bro 🤣
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.
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.