jest:模拟函数中没有调用Mock函数

Question

我想测试我的react login组件,但是还没有调用mock函数:

登录:

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

我模拟了两个函数,history.replace应该被调用login,模拟login为Promise函数.

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

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

我记录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();
})