last day (15 days later) » 

1:29 PM
0
Q: How to use Jest to check if async loaded content is rendered?

Behnam AzimiI have a component that renders a list of data, given by a hook. My hook returns some data on the component mount so the component always has some items to render. MyList component: function MyList() { let {data} = useLoadData() return ( <ul> {data.map(i => <li key={i}>{i}</li>)...

 
what library do you use? Enzyme, ReactTestingLibrary, something else? generally speaking there are the same steps 1) mock external data source 2) render component 3) wait till mocked Promise to be fullfilled 4) check something new has been rendered. For Enzyme 3+4 will be more complex, while for RTL 3+4 are way easier.
 
@skyboyer I use ReactTestingLibrary.
 
separately you will need to mock fetch response, but there are a tons of examples stackoverflow.com/search?q=%5Bjestjs%5D+mock+fetch so probably you already dealt with this part
 
@skyboyer thank you for your comments. But I render new items according to the data the hook returns. how should I implement this in my test? I'm just confused.
 
how does your test look currently? I mean, I think that you already have 1) mock external source(fetch) 2) render element; add it to the question so it would be easier to answer with specific code instead of talking "in general"
 
1:29 PM
@skyboyer I updated the question by adding my current test.
I appreciate your time :)
 
It looks ok to me on first glance. I'd probably replace `getByText` + `waitFor` on `findByText`as described in docs https://testing-library.com/docs/dom-testing-library/api-async#findby-queries

but nothing critical
how do you mock fetch?
 
I replaced the fetch with a simple local promise. like below
``` const fetchData = useCallback((params) => {
getData().then(res => setData(res))
}, [])```
function getData() {
return new Promise(resolve => {
setTimeout(() => resolve(["item1", "item2", "item3"]), 2000)
})
}
 
why did you add so long timeout? waitFor by default(and you have not provided explicitly higher value) waits only for 1000ms and then gives up
use immediately resolved promise instead: Promise.resolve(["item1", "item2", "item3"])
 
Because I would replace It with a real API call and it takes longer than immediately resolve
Warning: An update to MyList inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

I get these when I run my test
 
hmm. not sure if I follow. In real world, in browser your component needs real fetch and delay may be any - up to 30s which is default timeout for browsers afaik. But when mocking something in test it's ok to have much shorter delays.
 
1:36 PM
ok then. what about the errors I sent above?
 
let's ignore them by now; I guess waring will go away with proper test code
I propose you to return back fetch() call in the component
and to mock response in unit test to use mock-fetch package
oops, `fetch-mock`
https://www.npmjs.com/package/fetch-mock
 
I'm going to try this.
that you for your time. :)
 
you're welcome :)
if you face issues with integration/setting up fetch-mock take a look into code samples in leighhalliday.com/mock-fetch-jest
oops, they are using different mock library(jest-mock-fetch, not fetch-mock); approach would be the same, just methods to mock responses are named differently
 

last day (15 days later) »