如何测试解决承诺然后在 React 中更改状态的方法？

Question

我需要测试当按钮被点击和承诺解决之后 state.message === 'loggedIn successfully'

class Login extends Component {

    constructor() {
        this.onLoginClick = this.onLoginClick.bind(this); 
    }

    fetchLogin() {
        return new Promise(function (resolve) {
            reollve({ success: true });
        })
    }

    onLoginClick() {
        let that = this;
        fetchLogin().then(function ({ success }) {
            success ?
                that.setState({ message: 'loggedIn successfully' }) :
                that.setState({ message: 'Fail' });

        })
    }

    render() {
        return (<div>
            <button onClick={this.onLoginClick}></button>
        </div>)
    }
}

Answer 1

我猜你知道开玩笑simulate 是为了模拟你的点击（如果没有，那么simulate）

你应该可以使用 jest async/await 或 promises with jest，here 是官方文档的链接

应该是这样的：

it('works with async/await and resolves', async () => {
  const wrapper = mount(<Login />);

  wrapper.find('button').simulate('click'); 

  await expect(wrapper.state().message).resolves.toEqual('loggedIn successfully');
});

Answer 2

由于您正在对 Promise 执行测试，因此您应该等待按钮触发的函数执行，然后才能进行断言（因此是 await）。 下面的代码应该适用于您的情况：

it('should change state on successful login', async () => {
    const wrapper = mount(<Login  />);

    await wrapper.find('button').simulate('click');

    expect(wrapper.state().message).toEqual("loggedIn successfully");
  });