Jest React useEffect() executed after test : Cannot log after tests are done. Did you forget to wait for something async in your test?

Cannot log after tests are done. Did you forget to wait for something async in your test?

  useEffect(() => {
    console.log("client register", uniqueIdFormInput);
    formAggregatorRef.current.register(uniqueIdFormInput);

    return () => {
      console.log('cleanup unregister');
      formAggregatorRef.current.unregister(uniqueIdFormInput);
    };
  }, []);

However if you try to use await you get

SyntaxError: C:\dev\mx4d-ui\src\__jest-tests__\mutliple-form-aggregator.spec.js: Can not use keyword 'await' outside an async function (40:22)

Then if you add async to your unit test function

test('MultipleFormAggregator to prevent an invalid form submit two times in a row', async () => {

ReferenceError: regeneratorRuntime is not defined

Solution for regeneratorRuntime is not defined

Obsolete Solutions

const React = require.actual('react')
module.exports = { ...React, useEffect: React.useLayoutEffect }

This will cause the useEffect to be executed during painting instead of after.

This is obsolete as of React.JS 16.9.0 with the introduction of act().

References

https://github.com/facebook/react/issues/14050

https://codesandbox.io/s/m5m5yqrr18?file=/index.test.js

https://jestjs.io/docs/en/tutorial-async