模拟点击酶

Question

我有一个问题，酶工具测试反应应用。

在我的组件中，我有登录表单，我想测试在单击按钮后，p标签是否会被文本填充。

实际上，在单击submit之后，会向api发送请求(现在不存在)，返回有关不可访问端点的错误。

试着用很多方法测试，但注意到了一件有趣的事情。使用：

it('returns error if endpoint not reachable', () => {
    const wrapper = mount(<LoginForm dispatch={dispatch} store={store} />);
    wrapper.find('button').simulate('click');
    console.log(wrapper.debug());
  });

返回控制台中的HTML代码。但是这里的p标签也没有被填充。那么，我的问题是如何在这里使用模拟函数？

我第一次觉得这是由暂停引起的。但是使用setTimeout可以得到同样的结果。

谢谢你的帮助!

Answer 1

酶赋予提交单击事件的能力。如果它不起作用，我很好奇您是否选择了正确的元素。医生的一个例子..。

https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/simulate.md#example

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <div className={`clicks-${count}`}>
          {count} clicks
        </div>
        <a href="url" onClick={() => { this.setState({ count: count + 1 }); }}>
          Increment
        </a>
      </div>
    );
  }
}

const wrapper = shallow(<Foo />);

expect(wrapper.find('.clicks-0').length).to.equal(1);
wrapper.find('a').simulate('click');
expect(wrapper.find('.clicks-1').length).to.equal(1);

因此，在您的特定情况下，您提到了在单击submit按钮后进行API调用。您需要使用像Sinon这样的方法来隔离和嘲弄这种行为。

http://sinonjs.org/