Jest 是一个流行的 JavaScript 测试框架，能够帮助开发人员在编写代码时实现单元测试、集成测试等。当你开始创建 Angular 应用时，你可能想要知道如何在 Jest 框架中测试你的组件。在本文中，我们将向您展示如何使用 Jest 进行 Angular 组件测试。
安装 Jest
首先，您需要在项目中安装 Jest。可以使用 npm 或 yarn 安装 Jest。
npm install jest -D
或者
yarn add jest -D
配置 Jest
一旦您安装了 Jest，您需要配置它以在 Angular 应用程序中使用它。创建一个 jest.config.json 文件并将其放在项目的根目录下，然后添加以下内容：
-- -------------------- ---- -------
-
--------- ----------------------
--------------------- -
-------------------------
--
------------------------- -
--------------------------
-----------------
--
------------------- -
------------ ----------------------
--
------------------ ----
-此配置文件将使用 jest-preset-angular 预设配置您的 Angular 应用程序，并为 Jest 指定各种其他配置选项。
编写测试
一旦您已配置了 Jest，您可以开始编写测试。创建一个名为 *.spec.ts 的文件，将其放在与您要测试的组件相同的目录中，然后添加测试用例。
以 Angular 应用程序中的组件为例，我们可以编写以下测试：
-- -------------------- ---- -------
------ - ----------------- ------- - ---- ------------------------
------ - ------------- - ---- -------------------
------------------------- -- -- -
--- ---------- --------------
--- -------- --------------------------------
---------------- -- -- -
----- --------------------------------
------------- - ------------- -
--
---------------------
---
------------- -- -
------- - ---------------------------------------
--------- - --------------------------
------------------------
---
---------- -------- -- -- -
-------------------------------
---
---------- ------ ---------- -- -- -
----- -------- - ----------------------
------------------------------------------------------------------ ------
---
---上述测试的描述了 UserComponent 组件的创建和渲染行为。在 beforeEach 块中，我们使用 TestBed 创建了一个 CommonModule 并注入我们要测试的组件。然后，我们通过 TestBed.createComponent() 创建了一个 ComponentFixture 实例，通过 component 变量捕获了组件的实例，并调用了 fixture.detectChanges() 让组件完成了 Angular 的变化检测。
接下来，我们编写了两个测试用例。第一个测试用例测试了该组件是否创建成功，第二个测试用例测试了该组件是否正确渲染了用户名。
运行测试
到目前为止，我们已经编写了一个简单的测试用例，现在我们需要运行这个测试用例。通过在终端中运行以下命令，将运行所有的 Jest 测试用例：
npm test
或者
yarn test
如果所有测试都通过，Jest 将反馈一条成功的消息。如果任何一个测试未通过，它将提供详细的错误消息以帮助您调试代码。
总结
本文向您展示了如何在 Jest 框架中对 Angular 组件进行单元测试。测试不仅可以帮助您发现和修复错误，还可以提高代码可维护性和可重用性。无论您是一个有经验的开发人员还是一个初学者，测试都是促使您的代码更加健壮和高效的关键组成部分。
示例代码见以下链接:
https://github.com/Linqianyuan/blog_demo/tree/master/jest-angular-testing
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6529f6737d4982a6ebc55f3f