How to test multiple state changes with act?

[dirv]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
With the new act function, I'm unsure how to test state transitions that occur during an event handler processing. For example if I have this handler that is called on form submission:

const [isSubmitting, setIsSubmitting] = useState(false);
const handleSubmit = async () => {
  setIsSubmitting(true);
  await fetcher();
  setIsSubmitting(false);
};

then I want to be able to test that isSubmitting state is indeed set to true before fetcher is called.

Due to the nature of act (I believe it defers all state changes until after its provided function has been run) I'm not sure that this is currently possible?

Previously I've been testing using await new Promise(setTimeout) to flush the current runtime task queue, which works fine for this use case.

I have found a way to make this work without triggering the act warning, but it feels like a hack. I have to wrap act around my expectation, not the submit.

it('displays indicator when form is submitting', async () => {
  ReactTestUtils.Simulate.submit(form());
  await act(async () => {
    expect(container.querySelector('.submittingIndicator')).not.toBeNull();
  });
});

I've provided this test in a repo together with a couple of other tests which complete the feature - see the link below.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://github.com/dirv/react-act-toggle-state

What is the expected behavior?
There's a way for me to test this which doesn't feel like a hack.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16.9.0-alpha.0

[threepointone]

I made a PR to your repo with what I think would be a good solution. tl;dr - synchronously test the first change, wait a bit with async act(), and then test the next change. Hope it helps!

[dirv]

Thank you, that helps me a lot - this feels much more sensible than my solution! 🙏