unnecessary async act in examples?

[httnn]

is the async act really needed in this case?

expect(el.innerHTML).toBe("");
await act(async () => {
  resolve(42);
});
expect(el.innerHTML).toBe("42");

since you are not awaiting for the result of resolve or returning it, it seems like a normal non-async act might work here.

[danielkcz]

From my understanding, it's not necessary to have the "body" of act asynchronous (the async keyword seems unnecessary in this case), but it's possible for the convenience. The point is that await act makes sure that nothing asynchronous is in the queue so the following test code is ensured to be run when it's safe.

[peter-mouland]

I have a question on this subject also; I get this when i do try to put async into the act:

Warning: The callback passed to ReactTestUtils.act(...) function must not return anything

and if i keep the outer await, but remove the inner async, i get:

Do not await the result of calling ReactTestUtils.act(...), it is not a Promise.

[danielkcz]

@peter-mouland I suppose you don't have React 16.9.0-alpha.0 which includes the await act. Unfortunately, it's a common mistake expecting, but it's just an alpha experiment for now.

[peter-mouland]

ah ok - I don't expect so. but i'll happily test it with that build.

edit: amazing - my test worked first time after the update and following this guide. thanks!

[morgs32]

@FredyC how does this work?

The point is that await act makes sure that nothing asynchronous is in the queue so the following test code is ensured to be run when it's safe.

If we don't return the promise in the useEffect, the async operation is like a side effect right? How does react know it's happening?

[danielkcz]

You cannot return a promise from useEffect, that's a basic rule because the cleanup function is expected to be returned it and it would be confusing.

AFAIK the act is able to watch for Promises that are currently being queued, but I am not sure. Perhaps @threepointone can explain it better.

[adelespinasse]

AFAIK the act is able to watch for Promises that are currently being queued, but I am not sure. Perhaps @threepointone can explain it better.

I'd really like to know too. sync.md is the best explanation I've been able to find of act(), but it still doesn't explain what actually happens in the async case. The official React docs are practically useless on this topic. The implementation is too gnarly to read.