javascript - 开 Jest : Mock function have not been called in mock promise function

Question

我想测试我的 React 登录组件，但是还没有调用 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 您正在使用的 promise ，否则它不会等待，因此测试会在 promise 解决之前结束。 Here是用于测试异步内容的文档。您的测试需要成为一个 async 函数。 promise 需要存储在一个变量中，该变量可以在触发表单提交后与 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();
})