使用 Jest 测试 ES6 的类 (class) 和对象 (object)
随着前端技术的不断进步，ES6 带来了许多新的特性，其中类和对象是其中一个变化最大的特性。在项目中使用 ES6 的类和对象能够让项目更好的结构化，并且提高代码的可读性。但是使用 ES6 的类和对象也会带来一些问题，如何测试？
本文将详细介绍如何使用 Jest 测试 ES6 的类和对象，包括类和对象的基础测试，继承和多态的测试，以及使用 Jest 的 Mock 功能进行测试。
基础测试
首先，我们需要学习如何测试 ES6 的类和对象的基础方法。在测试之前，需要安装 Jest 和 babel-jest。
npm i jest babel-jest --save-dev
接下来是一个简单的 Person 类的示例代码，我们将测试它的两个方法：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
--------- -
-----------------------
-
-------- -
----------------------
-
-测试用例代码如下：
-- -------------------- ---- -------
------------------ -- -- -
----- - - --- ------------- ----
---------- ---- ------- ---- --- ----- -- -- -
------------------------------
--------------------------
---
---------- --- ------- ---- --- ----- -- -- -
----------- - ----------
------------
-----------
------------------------------------------------
---------------------------------------------
---
---在上述示例代码中，我们使用 describe() 函数定义一个测试套件，使用 it() 函数定义一个测试用例。在测试用例中，我们使用 expect() 函数调用特定断言以检查结果是否符合预期。我们还使用 Jest 提供的模拟(console.log = jest.fn())，以确保在调用 sayName() 和 sayAge() 方法时控制台输出了正确的名称和年龄。
在控制台中运行以下命令，我们将看到测试结果：
-- -------------------- ---- -------
--- --- ----
---- ------------------------
------
- ------ ---- ------- ---- --- --- -----
- ------ --- ------- ---- --- --- -----
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ------
--- --- ---- ------ -------- ------------------通过测试的结果告诉我们代码的正确性，这是我们进行下一步开发的根基。
继承和多态的测试
在 ES6 中使用类继承并且实现多态是一个很实用的设计技巧，它们也需要被测试。在这个示例中，我们将创建一个 Animal 类并扩展它到 Dog 和 Cat 类。
首先是 Animal 类：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
--------- -
-----------------------
-
--------------- -
-------------- -- -- ----------
-
-接下来是 Dog 和 Cat 类：
-- -------------------- ---- -------
----- --- ------- ------ -
--------------- -
-------------- -- - -------
-
-
----- --- ------- ------ -
--------------- -
-------------- -- - -------
-
-最后，我们将编写测试用例以确保 Dog 和 Cat 类的行为符合预期。
-- -------------------- ---- -------
------------------ -- -- -
---------- --- ------- ------ ------ -- -- -
----- ------ - --- -----------------
----------- - ----------
-----------------------
------------------------------------------- -- -- ----------
---
---
------------- --- ----- -- -- -
---------- --- ------- ------ ------ -- -- -
----- --- - --- -----------
----- --- - --- -----------
----------- - ----------
--------------------
--------------------
------------------------------------------- -- - -------
------------------------------------------- -- - -------
---
---这里，我们使用 Animal 类测试多态性，并检查它是否输出 "I am an animal."。接下来，我们对 Dog 和 Cat 类使用相同的方法并确保输出符合预期。
使用 Jest 的 Mock 功能进行测试
在实际的项目中，我们经常需要模拟数据和行为。此时就需要使用 Jest 的 Mock 功能进行测试。例如：模拟一个“假”数据。
-- -------------------- ---- -------
----- --- -
----- ----------- -
----- -------- - ----- -----------------------------------------------
------ --------------
-
-
----- ---- -
---------------- -
-------- - ----
-
----- ----------- -
----- ---- - ----- ---------------------
--------- - ----------
-------- - ---------
-
--------- -
-----------------------
-
-------- -
----------------------
-
-在测试中，我们需要 Mock axios 的 get() 方法以返回假数据以确保测试的可行性。
-- -------------------- ---- -------
---------------- -- -- -
----- --- - --- ------
----- ---- - --- ----------
---------- ---- ------- ---- --- ----- ----- -- -- -
----- -------- - - ----- ------ ---- -- --
--------- - --------------------------------------
----- ----------------
------------------------------
--------------------------
---
---------- --- ------- ---- --- ----- -- -- -
----------- - ----------
---------------
--------------
------------------------------------------------
---------------------------------------------
---
---这里我们模拟了 axios 的 get() 方法然后提供了模拟数据作为返回值。接下来我们调用 getInfo() 方法并确保返回的名称和年龄与模拟的属性值匹配。
总结
在本文中，我们学习了如何使用 Jest 测试 ES6 的类和对象，包括基础测试，继承和多态的测试，以及使用 Jest 的 Mock 功能进行测试。
对于前端开发者而言，测试代码是在保障软件质量方面的重要手段之一。随着越来越多的前端项目采用 ES6 的类和对象来组织代码，也必须掌握对它们进行有效测试的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654ae9557d4982a6eb4e14c4