开玩笑:模拟功能尚未在模拟承诺功能中调用

Question

我想测试我的react登录组件，但尚未调用模拟功能：

登录：

export default class LoginPage extends PureComponent {
    static propTypes = {
        login: PropTypes.func.isRequired,
        history: PropTypes.shape({
            replace: PropTypes.func.isRequired,
        }).isRequired,
    };
    onSubmit = (e) => {
        this.props.login(this.state.username, this.state.password)
            .then(() => {
                this.props.history.replace('/');
            });
    };
    render() {
        return (
            <form onSubmit={this.onSubmit}>
                ...
            </form>
        );
    }
}

我使用jest enzyme测试以下测试：

const props = {
    login: jest.fn(() => Promise.resolve('success')),
    history: {
        replace: jest.fn()
    },
};
const wrapper = mount(<LoginPage {...props}/>);
const form = wrapper.find(Form);
const inputs = form.find('input');
const username = inputs.at(0);
const password = inputs.at(1);
username.simulate('change', {target: {value: 'Changed'}});
password.simulate('change', {target: {value: 'Changed'}});
form.simulate('submit');
expect(props.login).toBeDefined();
expect(props.history.replace).toBeDefined();
// this is success
expect(props.login).toBeCalled();
// this is failure
expect(props.history.replace).toBeCalled();

i模拟两个功能，history.replace应由login调用，login被模拟为Promise函数。

expect(props.login).toBeCalled()测试成功。

但是expect(props.history.replace).toBeCalled()测试失败。

i log props.history.replace.mock，它输出{ calls: [], instances: [] }。

Answer 1

您需要告知Jest您使用的承诺，否则它将不等待，因此在承诺解决之前，测试已经结束。这是用于测试异步内容的文档。您的测试需要成为async功能。该承诺需要存储在一个变量中，该变量可以在提交表格提交后与await一起使用：

it('does something', async () => {
  const promise = Promise.resolve('success')
  const props = {
      login: jest.fn(() => promise),
      history: {
          replace: jest.fn()
      },
  };
  const wrapper = mount(<LoginPage {...props}/>);
  const form = wrapper.find(Form);
  const inputs = form.find('input');
  const username = inputs.at(0);
  const password = inputs.at(1);
  username.simulate('change', {target: {value: 'Changed'}});
  password.simulate('change', {target: {value: 'Changed'}});
  form.simulate('submit');
  await promise;
  expect(props.login).toBeDefined();
  expect(props.history.replace).toBeDefined();
  // this is success
  expect(props.login).toBeCalled();
  // this is failure
  expect(props.history.replace).toBeCalled();
})