前言
在前端开发中，测试是非常重要的一部分。测试可以保证代码的质量，减少 bug 的出现，提高代码的可维护性和可读性。在测试中，单元测试是非常重要的一环。Enzyme 和 Jest 是 React 中比较流行的测试框架。在本文中，我们将使用 Enzyme 和 Jest 编写一个基础的 Mutiple Choice Quiz。
Mutiple Choice Quiz
Mutiple Choice Quiz 是一个常见的测验形式，它包含一个问题和多个选项，只有一个选项是正确的。在本文中，我们将使用 React 编写一个基础的 Mutiple Choice Quiz。
项目结构
我们首先来看一下项目结构：
- --- ---------- - --- ------------ --- ----------- - --- --------- - --- ----------- --- -------
在 components 文件夹中，我们定义了 Option 和 Question 两个组件。在 __tests__ 文件夹中，我们定义了 Quiz.test.js 文件，用于测试 Quiz 组件。
Option 组件
我们先来看一下 Option 组件：
------ ----- ---- --------
----- ------ ------- --------------- -
-------- -
------ -
-----
-------
------ ------------ ---------------------- ------------------------ ------------------------------ --
---------------------
--------
------
--
-
-
------ ------- -------Option 组件中包含一个单选框和一个标签。name 和 value 分别对应单选框的 name 和 value 属性，onChange 用于监听单选框的变化。
Question 组件
接下来是 Question 组件：
------ ----- ---- --------
------ ------ ---- -----------
----- -------- ------- --------------- -
-------- -
------ -
-----
------------------------------
-------------------------------- ------ -- -
------- ----------- ---------------------- -------------------- -------------------------------
--------------
---------
---
------
--
-
-
------ ------- ---------Question 组件中包含一个问题和多个选项，通过 map 方法遍历选项数组，渲染出多个 Option 组件。
Quiz 组件
最后是 Quiz 组件：
------ ----- ---- --------
------ -------- ---- ------------------------
----- ---- ------- --------------- -
------------------ -
-------------
---------- - -
-------- --
--
-
------------------ - ------- -- -
----- - ----- ----- - - -------------
------------------------- -- --
-------- -
---------------------
------- -----
-
----
--
------------ - ------- -- -
-----------------------
----- -------------- - --------------------------------- --------- -- -
------ -
-------
---------------- ---------------
--
-- ----
----- ----- - ---------------------------------------- ---- -- -
-- -------------------- --- ------------------------ -
------ --- - --
-
------ ----
-- ---
---------- ------ -------- --- -- ----------------------------------
--
-------- -
------ -
----- -----------------------------
------------------------------------ ------ -- -
---------
-----------
--------------------
----------------------------
--------------------------
----------------------------------
--
---
------- -----------------------------
-------
--
-
-
------ ------- -----Quiz 组件中包含多个 Question 组件和一个提交按钮。handleOptionChange 方法用于监听单选框的变化，将答案保存到 state 中。handleSubmit 方法用于提交答案，计算分数并弹出提示框。
测试
最后是测试部分。我们使用 Jest 和 Enzyme 对 Quiz 组件进行测试。在 Quiz.test.js 中，我们定义了以下测试用例：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---- ---- ----------
---------------- -- -- -
----- --------- - -
-
----- ------------
--------- ----- -- - - ----
------- ----
-------- -
-
------ ----
------ ---
--
-
------ ----
------ ---
--
-
------ ----
------ ---
--
-
------ ----
------ ---
-
-
--
-
----- ------------
--------- ----- -- - - ----
------- ----
-------- -
-
------ ----
------ ---
--
-
------ ----
------ ---
--
-
------ ----
------ ---
--
-
------ ----
------ ---
-
-
-
--
----------- ------- ---------- -- -- -
------------- --------------------- ----
---
----------- --- ----- ---- -- ------ -- ---------- -- -- -
----- ------- - ------------- --------------------- ----
----- --------- - -------------------------------------------
----- --------- - -------------------------------------------
---------------------------- - ------- - ----- ------------ ------ --- - ---
---------------------------- - ------- - ----- ------------ ------ --- - ---
------------------------------------------
---------- ----
---------- ---
---
---
-------------- --- ----- ----------- -- -- -
----- ------- - ------------- --------------------- ----
----- --------- - -------------------------------------------
----- --------- - -------------------------------------------
----- ------------ - ----------------------------------------------
---------------------------- - ------- - ----- ------------ ------ --- - ---
---------------------------- - ------- - ----- ------------ ------ --- - ---
------------------------------ - --------------- -- -- -- ---
---------------------------------------------- ------ - --- -- -----
---
---我们测试了 Quiz 组件是否能够正常渲染，选项是否能够正确更新 state，是否能够正确计算分数并弹出提示框。
结论
本文介绍了如何使用 Enzyme 和 Jest 编写一个基础的 Mutiple Choice Quiz。我们通过编写 Option、Question 和 Quiz 组件，实现了一个简单的测验系统。同时，我们使用 Jest 和 Enzyme 对 Quiz 组件进行了测试。测试可以保证代码的质量，减少 bug 的出现，提高代码的可维护性和可读性。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673ea30290e7ed93bee4094f