本文将介绍如何使用 npm 包 ng-library-testing 对 Angular 应用的组件进行测试。ng-library-testing 是一个基于 Jest 和 Testing Library 的 npm 包，它为我们提供了一些工具方法，能够使我们更容易地编写 Angular 组件的单元测试。
安装
首先，我们需要安装 ng-library-testing 所依赖的库，包括 Jest、Testing Library 和 @testing-library/angular：
$ npm install --save-dev jest @testing-library/jest-dom @testing-library/angular ng-library-testing
使用
假设我们已经有了一个 Angular 应用，并且想编写一个叫做 MyComponent 的组件的单元测试。我们可以在对应的 spec 文件中，引入 ng-library-testing 提供的一些工具方法，例如 renderMyComponent 和 screen：
-- -------------------- ---- -------
------ - ----------------- - ---- ---------------------
------ - ------ - ---- ---------------------------
----------------------- -- -- -
---------- ------- --- ------- ------ -- -- -
------------------- ----- ------ ------- ---
------------------------------ -----------------------
---
---在这个例子中，我们调用了 renderMyComponent 方法来渲染 MyComponent，将一个名为 text 的字符串 prop 传入。之后，我们利用 screen 对象来获取一个包含了 Hello world! 文本内容的元素，并使用 expect 断言来检查其是否存在。
方法
ng-library-testing 提供了以下方法：
renderMyComponent<T>(options: { component: Type<T>, props: any }): RenderResult<T>
渲染一个组件并返回一个 RenderResult 对象。options 参数包含组件类型和 prop 属性。
interface RenderResult<T> {
fixture: ComponentFixture<T>;
container: HTMLElement;
instance: T;
}screen: Queries
类似于 @testing-library/dom 中的 screen 对象，包含了一些 DOM 查询的工具方法，例如 getByText、getByTestId 等。
fireEvent: FireObject
类似于 @testing-library/dom 中的 fireEvent 对象，包含了一些事件触发的工具方法，例如 click、change 等。
示例
下面的代码演示了如何使用 ng-library-testing 来测试一个简单的 Angular 组件：
-- -------------------- ---- -------
------ - ----------------- ------- - ---- ------------------------
------ - --------- - ---- ----------------
------ - ------------------ ------ - ---- ---------------------
------------
--------- -------------------
--------- -------- ---- ---------
--
----- ----------- -
----- -------
-
----------------------- -- -- -
--- -------- ------------------------------
------------- -- -
--------------------------------
------------- --------------
---
------- - -------------------------------------
---
---------- ------- --- ------- ------ -- -- -
----- - --------- - - ------------------- ---------- ------------ ------ - ----- ------ ------- - ---
------------------------------ -----------------------
---
---------- ------ ---- -- ------ ------- -- -- -
----- - -------- - - --------------------------
----- - --------- - - ------------------- ---------- ------------ ------ - ----- ------------- - ---
----- ------ - ----------------------- -----
----------------------------
------------------------
------------------------------ -----------------------
---
---在上面的示例中，我们定义了一个 MyComponent 组件，并在测试中使用 renderMyComponent 方法来进行渲染。我们使用了 screen 对象来查询 DOM 元素，以及 fireEvent 对象来触发事件，测试组件的 props 和用户交互行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fea81e8991b448dd9ae