Jasmine `calls.length` 和 `callCount` 未定义问题解决方案

在使用 Jasmine 进行前端单元测试时，可能会遇到 calls.length 和 callCount 属性为 undefined 的问题。这两个属性通常用于检查函数被调用的次数和参数，如果出现 undefined 的情况就无法进行相关断言和测试了。本文将分析问题原因，并提供解决方案以及相关指导意义。

问题原因分析

Jasmine 中的 Spies 模块可以模拟函数的行为，包括记录函数被调用的次数和参数。当使用 jasmine.createSpy() 或 jasmine.createSpyObj() 创建 Spy 对象后，可以通过访问 calls.length 或者 callCount 属性来获取被调用的次数。

const myMockFn = jasmine.createSpy('myMockFn');
expect(myMockFn.calls.count()).toBe(0);
myMockFn();
expect(myMockFn.calls.count()).toBe(1);

然而，在某些情况下，calls.length 和 callCount 属性可能会变成 undefined。这通常是由于对 Spy 对象的不正确使用所导致的。

一种可能的情况是在创建 Spy 对象后立即调用该函数，例如：

const myMockFn = jasmine.createSpy('myMockFn')();

这样的写法实际上是先调用了 Spy 函数，再把返回值赋值给了变量 myMockFn。这会导致 myMockFn 变成了函数的返回值，而不是 Spy 对象本身，进而导致 calls.length 和 callCount 属性变为 undefined。

另一种情况是在使用 jasmine.createSpyObj() 创建 Spy 对象时，如果没有为每个方法指定默认的返回值，也会导致 calls.length 和 callCount 属性为 undefined。例如：

const myMockObj = jasmine.createSpyObj('myMockObj', ['method1', 'method2']);
expect(myMockObj.method1.calls.count()).toBe(0); // 此处会报错

这里因为没有为 method1 和 method2 指定默认返回值，所以调用 myMockObj.method1() 时会返回 undefined，进而导致 .calls 属性未定义。

解决方案

针对上述问题原因，解决方案也比较简单。

对于第一种情况，正确的写法应该是：

const myMockFn = jasmine.createSpy('myMockFn');
myMockFn();
expect(myMockFn.calls.count()).toBe(1);

即先创建 Spy 对象，再调用该函数。

对于第二种情况，需要为每个方法指定默认返回值，例如：

const myMockObj = jasmine.createSpyObj('myMockObj', ['method1', 'method2']);
myMockObj.method1.and.returnValue('foo');
expect(myMockObj.method1.calls.count()).toBe(0); // 此处不会报错

同时，我们还可以通过使用 spyOn() 方法来替代 jasmine.createSpy() 和 jasmine.createSpyObj()，它可以直接在现有的对象上创建 Spy 对象，并且不会影响原始函数的返回值。例如：

const myObj = {
  foo: () => 'bar'
};
spyOn(myObj, 'foo');
myObj.foo();
expect(myObj.foo.calls.count()).toBe(1);

指导意义

通过分析和解决 Jasmine calls.length 和 callCount 未定义的问题，我们可以得出以下指导意义：

1. 在创建 Spy 对象后不要立即调用该函数，以避免将函数调用的结果赋值给变量而导致的问题。
2. 在使用 jasmine.createSpyObj() 创建 Spy 对象时，需要为每个方法指定默认返回值，以确保 .calls 属性能够正常工作。
3. 可以使用 spyOn() 方法

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28596