How to test a handler containing setState - reactjs

Question

I have a component ButtonTest.js
import React from 'react';
class ButtonTest extends React.Component {
constructor() {
super();
this.state = {
disabled: false,
};
}
handleClick = () => {
this.setState({
disabled: !this.state.disabled,
});
}
render() {
return (
<div>
<button onClick={this.handleClick}>
First Button
</button>
<button disabled={this.state.disabled}>
Second Button
</button>
</div>
);
}
}
export default ButtonTest;
Testing code in file ButtonTest.test.js
import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import ButtonTest from "./ButtonTest";
Enzyme.configure({ adapter: new Adapter()});
describe('<Button />', () => {
it('test buttontest', () => {
const wrapper = shallow(<ButtonTest />);
const firstButton = wrapper.find('button').at(0);
const secondButton = wrapper.find('button').at(1);
firstButton.props().onClick();
expect(secondButton.props().disabled).toEqual(true);
});
});
firstButton.props().onClick(); will trigger handleClick, then setState is called. But, setState is an async function, so the assertion will be called before render. That why the test is FAIL.
How to ensure the render finished before the assertion is called

Answer 1

I update test code like this. I don't define secondButton at the beginning, I define it after clicking finished
describe('<Button />', () => {
it('test buttontest', () => {
const wrapper = shallow(<ButtonTest />);
const firstButton = wrapper.find('button').at(0);
firstButton.props().onClick();
const secondButton = wrapper.find('button').at(1);
expect(secondButton.props().disabled).toEqual(true);
});
});