vue.js - Jest spyOn 报告一个方法被调用的对象与实际调用的对象不同

Question

我正在使用 Jest spyOn 来跟踪 Vue 路由器上的方法。我正在测试的 Vue 方法如下所示:

myMethod() {
  this.$router.push({ name: "login" });
}

我想确保 $router.push 被调用，所以在我的测试中我有这个:

const spy = jest.spyOn(wrapper.vm.$router, 'push');
expect(spy).toHaveBeenCalledWith({ name: "login" });

但是这个测试失败了，错误是:

Expected mock function to have been called with:
        {"name": "login"}
      as argument 1, but it was called with
        {"name": "login", "params": {}, "path": "/login"}.

没问题，我可以将测试更新为以下并且它有效:

expect(spy).toHaveBeenCalledWith({
  name: "login",
  params: {},
  path: "/login"
});

我的问题是:为什么 Jest spy 报告它是用一个具有三个属性的对象调用的，但是当我们查看实际方法调用时，它只有一个属性？

Answer 1

vue-router 添加一些默认值到 params 和 path 属性。当您使用 spyOn 时，您将检测到 vue-router 分配的其他参数。如果您将 spy 显式添加到 push 方法，那么您将只会看到 name 属性。

试试这个:

const spy = jest.fn();
wrapper.vm.$router.push = spy;
expect(spy).toHaveBeenCalledWith({ name: "login" });