How to make Jest wait for state to update - React / Jest / Enzyme

Question

I have a simple programme which changes the helperText of a textField when a button is clicked.

In Jest, I am simulating the button press, I then want to validate that the helper text has changed. Currently, I am just console.logging the text field before and after the click, but in both cases it says the value is "". I am expecting it to be "Username must not contain any special characters" after the click is executed.

Jest/Enzyme test:

import React from "react";
import RegistrationPage from "../pages/registration";
import { configure, mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { act } from "react-dom/test-utils";
import TextField from "@material-ui/core/TextField";

configure({ adapter: new Adapter() });

describe("App", () => {
  it("renders without crashing", () => {
    let wrapper;
    act(() => {
      wrapper = mount(<RegistrationPage />);

      console.log("BEFORE CLICK");
      console.log(wrapper.find(TextField).first().props());

      wrapper.find("#submitRegForm").first().props().onClick();
    });

    console.log("AFTER CLICK");
    console.log(wrapper.find(TextField).first().props());

  });
});

The React looks like this:

const onSubmitHandler = ()=>{
 setDisplayName({ 
 ...displayName, 
 helperText: "Username must not contain any special characters",
 error: true
});
}

.
.
.

<TextField {...props} size="small" fullWidth variant="outlined" />

<Button 
 variant="contained"
 color="primary"
 fullWidth
 onClick={onSubmitHandler}
 id="submitRegForm">
 Finish
</Button>

Answer 1

Maybe thee is a more canonical way, but I, personally, just use a

it('...', (done) => {
    //simulating some async functions

    setTimeout(() => {
        expect...

        done();
    });
}