AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Fake snap loading screen1/16/2024 ![]() Remember that we have to use findBy* which returns a promise that we can await. We can add a timeout in the third parameter object waitForOptions.Īs before, await when the label we expect is found. Sometimes you want it to wait longer before failing, like for our 3 second fetch. The default timeout of findBy* queries is 1000ms (1 sec), which means it will fail if it doesn't find the element after 1 second. Note that if you have the jest fake timers enabled for the test where you're using async utils like findBy*, it will take longer to timeout, since it's a fake timer after all □ No fake timers nor catching updates manually. This way, we are testing the component closer to how the user uses and sees it in the browser in the real world. bug() only after the await, to get the updated UI We don't even need the advanceTimersByTime anymore, since we can also just await the data to be loaded. findBy* queries are special, that they return a promise that resolves when the element is eventually found.Then, we catch the async state updates by await-ing the assertion. Instead of wrapping the render in act(), we just let it render normally. The test has to know about these state updates, to allow us to assert the UI changes before and after the change. In our case, when the data arrives after 3 seconds, the data state is updated, causing a re-render. ![]() The error we got reminds us that all state updates must be accounted for, so that the test can "act" like it's running in the browser. Part of React DOM test utils, act() is used to wrap renders and updates inside it, to prepare the component for assertions. Note that it's not the bug since even after commenting it out, the same warning shows. □ but we're getting some console warnings □ □ You can also put a selector here like bug(screen.getByText('test')). To make it work, put eFakeTimers on setup and eRealTimers on teardown This is so test runner / CI don't have to actually waste time waiting. □ Note that we use jest.advanceTimersByTime to fake clock ticks. Simulate to the time data arrives, by fast-forwarding 3 seconds.
0 Comments
Read More
Leave a Reply. |