Как проверить обработчик, содержащий setState

Question

У меня есть компонент 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;

Проверка кода в файле 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(); вызовет handleClick, затем вызывается setState,Но setState является асинхронной функцией, поэтому утверждение будет вызвано до render.Вот почему тест не пройден.

Как обеспечить завершение render до того, как утверждение будет названо

Answer 1

Я обновляю тестовый код следующим образом. Я не определяю secondButton в начале, я определяю его после нажатия кнопки "Закончено"

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);
  });
});