前言
在前端项目中，测试是不可或缺的一环。而 Sinon.JS 是一个流行的 JavaScript 测试库，它可以模拟出各种 JavaScript 组件的行为。
Polymer 是 Google 推出的一个 web 组件库，其中包含了很多方便的 web 组件，例如表单元素、日期选择器等等。Polymer 库不仅可以使用原生的 JavaScript 语言来编写，还可以结合使用 TypeScript，先进的开发工具极大地简化了开发者的工作。
本文主要介绍在使用 Polymer 库开发时，如何使用 npm 包 @polymer/sinonjs 来进行单元测试。
安装 @polymer/sinonjs
可以使用 npm 包管理器将 @polymer/sinonjs 安装到项目中：
npm i --save-dev @polymer/sinonjs
使用 @polymer/sinonjs
在 Polymer 项目中使用 @polymer/sinonjs
为了在 Polymer 项目中使用 @polymer/sinonjs，我们需要先在组件构造函数中引入这个库：
import {SinonStub} from '@polymer/sinonjs/sinon-stub.js';然后，我们可以使用 Sinon.JS 提供的 API，比如 sinon.stub() 来实现各种单元测试中的操作。例如，我们可以为 Polymer 组件的方法创建一个桩（stub）：
-- -------------------- ---- -------
----- ----------- ------- -------------- -
---------- -
-- -- ---------
-
-
----- ------ - --- -------------------------------- ------------
------------------- -- ---------
-----------------------------------在这个例子中，我们成功创建了一个名为 myStub 的桩。注意，在 callsFake() 中，我们将桩的返回值设置为 hello。
使用 @polymer/sinonjs 进行更高级的测试
@polymer/sinonjs 还提供了许多可用于测试的 API。以下是其中的一些例子：
1. 模拟 Ajax 请求
-- -------------------- ---- -------
------ --------------- ---- --------------------------------------
----------------------- -- -- -
--- -------
------------- -- -
------ - ----------------
---
------------ -- -
-----------------
---
---------- ------ ---- ---------- -- -- -
------------------------- ------------- ----- --- -- -------- -- -----
----- ----------- - --------------------------------- -- -----------------
-----------------
------ --------------------- -- --------------------- -------- -- ----
---
---2. 模拟定时器
fakeTimer = useFakeTimers();
setTimeout(() => console.log('hello'), 100);
fakeTimer.tick(200);在这个例子中，我们使用 useFakeTimers() 来模拟定时器。在调用 setTimeout() 方法后，我们使用了 fakeTimer.tick(200)，将时间推向了 200ms。因此，我们可以看到终端窗口中输出了一条 hello 的日志。
3. 模拟用户输入
-- -------------------- ---- -------
------ ------------- ---- -----------------------------------
------ ------ ---- ---------------------------------
----------------------- -- -- -
--- --------
------------- -- -
------- - ------------------- ----------- -----
---
---------- ------ ----- -------- -- -- -
----- ------------ - -------------
--------------------------------- --------------
---------------------------
---------------------------------------
---
---在这个例子中，我们使用 createEvent() 方法创建了一个假的 input 事件，并将其触发。我们还使用了 sinon.stub() 方法将组件的 input 事件关联到名为 myMethodStub 的桩上。由于我们使用 fire() 方法将事件触发了一次，因此我们可以期望 myMethodStub.called 返回 true。
结论
在本文中，我们学习了如何使用 npm 包 @polymer/sinonjs 在 Polymer 项目中进行单元测试。除此之外，我们还学习了一些使用 Sinon.JS 进行单元测试的高级技巧。希望本文对您有所帮助，让您的单元测试更加严格、更加合理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad11b5cbfe1ea0610bd2