在前端开发中，对于 JavaScript 的测试框架，Jest 已经成为了非常流行的选择之一。但是与其他测试框架相比，Jest 的错误提示似乎有些简略。
如果你经常使用 Jest 进行测试，你一定遇到过这种情况：有时候测试失败，但是却只给了一个一般性的错误提示，这让你不知道问题出在了哪里。那么，如何使 Jest 的错误提示更加详细和清晰呢？答案是：自定义错误提示！
为什么需要自定义错误提示？
Jest 的默认错误提示可能会提示你测试用例的标题，以及出现错误的行数。但是当测试用例比较复杂或者函数嵌套很深时，这样的提示可能不够清晰且无法准确指出错误的位置。
下面的示例代码可能就是一个很好的例子：
describe('my test', () => {
it('should return the correct number', () => {
const a = 1;
const b = 2;
const c = 3;
expect(a + b).toEqual(c)
})
})如果你运行上面的测试用例，你会得到如下的错误提示：
● my test › should return the correct number
expect(received).toEqual(expected)
Expected value to equal:
3
Received:
3从这个错误提示中，你可能不会很清楚的知道，错误是出在哪一行代码上，或者是由于哪个变量的值不对引起的。
因此，我们需要自定义错误提示来提供更多的上下文信息，以便更好的定位错误。
自定义错误提示
首先，我们需要用到一个 Jest 提供的函数叫做 toThrowErrorMatchingSnapshot，该函数是用来测试代码是否抛出了一个错误，并且错误信息与预期的快照相符合。如果错误信息与快照不符，Jest 将在控制台中输出一个 diff。
下面是一个简单的示例代码：
function throwError() {
throw new Error('Error Message');
}
test('throw error', () => {
expect(() => throwError()).toThrowErrorMatchingSnapshot();
});当测试运行失败时，你会得到这样的错误提示：
-- -------------------- ---- -------
-----------------------------------------------
-------- ----- -- ----- ---------
------ --------
-------- ------- ---- ------ ---------
- --------
- --------
-- ---- ---- --
------ -
---------- ------ ---------
- -------- ------- ----- --------- -- ---------------
- -------- ------- ----- --------- -- --------------
-上述示例代码的报错信息中包含了实际的错误信息，包括错误的堆栈信息和错误信息，对于我们进行错误调试非常有帮助。
但是，这并没有完全满足我们的需求，因为上述例子的错误信息都是同一个字符串，在实际的项目中可能很难准确定位错误的位置。因此，我们需要自定义错误信息。
我们可以通过重写 Jest 中的 console.error 函数来实现自定义错误提示。这个函数在控制台中输出错误信息时会被调用。
-- -------------------- ---- -------
----- --------------- - --------------
------------- - ----------------- -
----- ------------ - ----------- ---
-- ----------------------------------- - -- ------- ------ -----
-------------------------- ------------ ---------
- ---- -
-------------------------- ---------
-
--在上例中，我们通过给 console.error 函数添加一个新的参数，使得控制台输出我们自定义的错误提示，而不是 Jest 提供的默认错误提示。这样，当测试失败时，我们就能够获得更详细的错误信息了。同时，为了保证我们测试用例的稳定和准确，我们只对 Jest 报出的 Expect 的错误进行自定义错误处理。
总结
通过自定义错误提示，我们可以快速地定位代码错误所在的行数和出错的变量名称，提高了我们开发代码的效率。同时，通过自定义错误代码，我们可以更准确地进行错误提示和调试，从而提高代码的可维护性和可读性。
以上就是关于 Jest 错误提示自定义的介绍，相信这对你在前端开发中使用 Jest 进行测试会有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c4561968c7c53b0e929c2