前言
前端单元测试与代码覆盖率是项目中必不可少的一部分。Jest 是一个流行的 JavaScript 测试框架，在前端应用中已经被广泛使用。但是，单纯地编写测试用例并不能完全覆盖我们的代码，只有达到 100% 的覆盖率才能确保代码的质量和可靠性。本文将通过一个小案例分享如何用 Jest 单元测试获得无缝的 100% 覆盖。
准备工作
在开始之前，我们需要先安装 Jest。可以使用 npm 进行安装：
npm install jest --save-dev
在本文中，我们将会测试一个简单的字符串拼接函数：
function hello(name) {
return "Hello, " + name + "!";
}编写测试用例
我们首先来编写我们的测试用例。在项目的根目录下创建一个名为 test 的目录，并在其中创建一个名为 hello.test.js 的文件。文件名以 .test.js 结尾的文件都将被 Jest 识别为测试文件。在 hello.test.js 文件中编写以下代码：
const hello = require("../hello");
describe("hello function", () => {
test("greets the given name", () => {
expect(hello("Bob")).toBe("Hello, Bob!");
});
});以上代码中，我们通过 require 引入了我们要测试的 hello 函数。我们使用了 Jest 的 describe 和 test 函数来编写测试用例。在 test 函数中，我们使用了 Jest 的 expect 函数来断言函数的返回值是否符合预期。
运行测试用例
现在，我们可以使用 Jest 运行我们的测试用例。在命令行中运行以下命令：
npx jest
在运行测试之前，我们需要确保执行了 npm init，并在 package.json 文件中指定了测试脚本：
{
"scripts": {
"test": "jest"
}
}除此之外，我们还可以在命令行中指定要运行的测试文件：
npx jest test/hello.test.js
如果一切顺利，我们将会看到以下输出：
PASS test/hello.test.js
hello function
✓ greets the given name (3ms)这意味着我们的测试用例运行成功，并且我们的 hello 函数按照预期地返回了字符串。
实现 100% 的覆盖率
虽然我们的测试用例成功地覆盖了函数的一个分支，但这并不足以确保我们的代码能够达到 100% 的覆盖率。为了达到 100% 的覆盖率，我们需要覆盖函数的所有分支。在本例中，我们需要覆盖两种情况：name 为 undefined 和 name 不为 undefined。
我们可以通过新的测试用例来覆盖 name 为 undefined 的情况。在 hello.test.js 文件中添加以下代码：
describe("hello function", () => {
test("throws an error if name is not provided", () => {
expect(() => hello()).toThrow("Name is required");
});
});现在，我们期望当 name 为空时函数将抛出一个错误。为了验证代码是否能够正确地处理这种情况，我们使用了 Jest 的 toThrow 匹配器来断言函数是否抛出了 Name is required 的错误信息。
现在，我们可以重新运行测试用例，以检查是否覆盖了所有分支：
-- -------------------- ---- -------
---- ------------------
----- --------
- ------ --- ----- ---- -----
- ------ -- ----- -- ---- -- --- --------
-----------------------------------------------------------------------
---- - - ----- - - ------ - - ----- - - ----- - --------- ---- --
-----------------------------------------------------------------------
--- ----- - --- - --- - --- - --- -
-------- - --- - --- - --- - --- -
-----------------------------------------------------------------------现在我们已经成功覆盖了所有的分支。使用 Jest 的测试框架以及严谨的测试用例可以保证我们的前端代码的质量和可靠性。
结论
在本文中，我们学习了如何使用 Jest 的单元测试框架以及如何编写有效的测试用例。我们还学习了如何使用测试用例达到 100% 的代码覆盖率。这为我们的前端项目提供了保障，并减少了潜在的错误和风险。通过不断地练习和探索，我们可以更好地掌握 Jest，并写出更好的测试用例，从而使我们的项目更加健壮、可维护和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6728be872e7021665e218d03