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您正在使用的承诺，否则它将不会等待，因此在承诺结算之前测试已结束。 Here是测试异步内容的文档。您的测试需要成为async函数。承诺需要存储在一个变量中，该变量可以在表单提交被触发后与await一起使用：

it('does something', async () => {
  const p = Promise.resolve('success')

  const props = {
      login: jest.fn(() => p),
      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 p
  expect(props.login).toBeDefined();
  expect(props.history.replace).toBeDefined();

  // this is success
  expect(props.login).toBeCalled();

  // this is failure
  expect(props.history.replace).toBeCalled();
})

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

1 个答案: