在前端开发中，我们常常会需要对一些方法进行单元测试以确保它们能够正确地处理我们想要的输入，并返回预期的结果。为了达到这个目的，我们通常使用一些测试工具，比如 Jest、Mocha 等。在测试过程中，我们可能需要对一些方法进行监视及更改其行为，这时候，我们可以使用 npm 包 spy-stub。
什么是 spy-stub
spy-stub 是一个可以用于监视方法调用、记录参数和返回值、并且可以替代方法的 npm 包。它能够帮助我们测试一些我们无法直接观察到的行为，如同一个方法是否被调用过、被调用了多少次、被调用时传递了什么参数等等。它的使用既简单又灵活，使得对函数的测试变得轻而易举。
如何使用
安装
通过 npm 安装 spy-stub：
npm install spy-stub --save-dev
监视方法的调用
spy 是一个函数，可以接受任何函数作为参数，并将其替换为新的函数。新的函数记录了被调用的次数、参数和返回值。
-- -------------------- ---- ------- ----- --- - ------------------------ -------- -------- - ------ - - -- - ----- -------- - --------- ---------------------------- -- - ------ -- ------- --- -------- -- - ----------- --- ---------------------------- -- - ------ -- ------- ---- ---- -------- --- -
在上面的例子中，我们首先定义了一个加法函数 add，然后用 spy 创建了一个新的函数 spiedAdd，这个新的函数会代替原来的 add。当我们调用 spiedAdd 时，它将记录此次调用的 count、params 和 results。在该例中，我们传递了两个参数给 spiedAdd，它将这两个参数存储在 calls.params 中，并返回它们的和，也被存储在 calls.results 中。
替代方法的行为
stub 是一个函数，和 spy 相似，也可以接受一个函数作为参数，并将其替换为新的函数。新的函数可以返回任何我们想要它返回的值。
-- -------------------- ---- ------- ----- ---- - ------------------------- -------- -------- - ------ - - -- - ----- ---------- - --------- ---- ----------------------------- -- --
在上面的例子中，我们用 stub 创建了一个新的函数 stubbedAdd，它代替了原本的 add。该 stubbedAdd 永远返回 10，而不是返回参数的和。
使用 beforeEach 和 afterEach
在一些测试框架中，我们可以使用 beforeEach 和 afterEach 方法来初始和清空 spy 和 stub 实例：
-- -------------------- ---- -------
----- ------- - --------------------
----- ---- - -------------
----- --- - ------------
------------------- -------- -- -
--- ------ --------
------------------- -- -
----- - ------ -- ----
------- - ------- -- --- ---------- -------
---
------------------ -- -
---------------
-----------------
---
-------- ----------- -------- -- -
-- ---- ---- ---- ----
---
---在上面的例子中，我们定义了一个 describe 块，并使用了 beforeEach 和 afterEach 方法，它们分别在每个测试前置和后置操作。在 beforeEach 中，我们创建了一个 spied 函数和一个 stubbed 函数；而在 afterEach 中，每个 spied 函数和 stubbed 函数都会调用其 revert 方法，以确保在每次测试之后都不会持续存在。
总结
spy-stub 包是一个非常有用的工具，它可以帮助我们更方便地测试 JavaScript 函数，监视方法的调用、记录参数和返回值，并替代方法的行为。通过使用 spy-stub 包，我们可以更快、更方便地进行单元测试，并有助于我们更好地了解代码的运作方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e181e8991b448d76e8