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

如何测试包含setState的处理程序

1 个答案: