Leverage the waitFor Async Util to Await for an Assertion to Pass
After querying and interacting with elements come assertions. Assertions are really important to assert that your test case really works. Sometimes due to the async nature of your code, your assertion might need to wait some time until it passes.
In this lesson, we will learn how to wait for a period of time until our assertion passes by using the waitFor util.
Instructor: [0:00] There will be times you will perform actions in your application that will take time to happen. The problem is that you might want to make some assertions about the results of those actions, and if they take time to happen, your tests won't be able to wait for them.
[0:12] To deal with this, you can leverage one of the asynchronous utils that a testing library gives to you, the waitFor. WaitFor is an asynchronous function that receives a callback function that will be looped for a specific interval until this callback stops throwing an error.
[0:26] Let us see this in practice. If we look at our component, we can see that it receives a getData prop. This prop is a function that would be used to fetch some data. Scrolling down, we can see now that we have a button with the text getData that, when clicked, will set a timeout of 500 milliseconds, and after this time elapses, calls the getData function.
[0:48] Let us write tests for this scenario. In this test, we want to assert that our getData function was called. To do this, we will need a mock function that will let us know if the function was called. We can leverage the jest.fn function. This get function needs to be passed to our component though, so when rendering our component, we pass it as props.
[1:07] We need to query for our button, so let us leverage our byRole query to find the button with the text getData in it. We know that we will need to click on this button for something to happen. Let us set up our user event to get our user instance and then use it to click on our button.
[1:22] Because user event is asynchronous, we need to await for it. Let's change our test case to be async. Now, we want to assert that our getData function was called once, but if I write our assertion and run our test, it fails. This is because it takes some time until the function is called due to the setTimeout.
[1:41] This is the right scenario to reach out for the waitForUtil. First, let us import waitFor from the testing library. Then, let us wrap our assertion with it and make it a callback. What will happen now is that this assertion will be looped until it passes. If we rerun our test, we should now see that it has passed.