Chai.expect 方法调用无实际返回值造成的错误

背景

在前端开发中，我们经常会使用 Chai 这样的断言库来编写测试代码。其中，expect 方法是 Chai 提供的一种常用的语法糖。然而，我们很容易忽略它的细节，从而在使用的时候出现各种错误。

问题描述

在使用 Chai.expect 方法时，我们通常是按照下面的方式编写代码：

const actual = add(1, 2);
const expected = 3;
expect(actual).to.equal(expected);

这段代码用来测试一个 add 函数，测试通过当且仅当调用 add(1,2) 的结果等于 3。其中，expect 方法是 Chai 提供的断言函数，它会判断实际值与期望值是否相等，并根据结果返回一个布尔值。

然而，我们在写 expect 方法时常常忘记它是没有实际返回值的。这意味着如果我们不调用 expect 方法的链式函数，那么测试代码会什么也不做（没有断言也没有其他输出），从而导致测试失败。

例如，下面这段代码虽然实例化了一个断言函数，却没有调用其链式函数：

const actual = add(1, 2);
const expected = 3;
expect(actual);

这样会导致测试失败，因为没有进行实际的断言。

解决方案

为了避免这样的错误，在使用 Chai.expect 方法时，我们应该始终意识到它是一个没有实际返回值的函数，即使我们调用它的链式函数也不会有任何实际效果。因此，我们应该总是确保对 expect 方法调用至少一个链式函数。

例如，下面这段代码对 add 函数进行的测试，即使没有断言，也会输出一个“expected NaN to be 3”的错误信息：

const actual = add(1, '2');
const expected = 3;
expect(actual).to.equal(expected);

这是因为通过调用 expect 方法的链式函数，我们成功将实际值和期望值传递到了断言函数中，并触发了一个错误的断言。

另外，我们也可以使用 Chai.should 方法或者 Chai.assert 方法来进行测试，例如：

// javascriptcn.com 代码示例
const actual = add(1, 2);
const expected = 3;
actual.should.equal(expected);

// 或者

const actual = add(1, 2);
const expected = 3;
assert.equal(actual, expected);

这两种方法都可以避免“调用无实际返回值”的问题，同时也可以给我们更多的代码风格选择。

总结

Chai.expect 方法的调用不存在实际返回值的问题，容易忽略但是又非常严重。在使用 Chai.expect 方法时，我们应该始终牢记这一点，并且保证至少调用 expect 方法的链式函数。通过这种方式，可以有效地避免因为使用上的疏忽而造成的错误，提高代码的质量和准确性。

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