Question

我在使用酶工具测试React app时遇到了问题。

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

实际上点击提交后，会向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

Enzyme可以提交点击事件。如果它不起作用，我很好奇你是否选择了正确的元素。来自文档的一个例子......

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

因此，在您的特定情况下，您提到在单击提交按钮后进行API调用。您需要使用像Sinon这样的东西来隔离和模拟这种行为。

http://sinonjs.org/

模拟点击 - 酶

1 个答案: