在使用 React Hook 开发前端项目时，我们常常会使用 Jest 进行单元测试。但是，Jest 在使用 React Hook 时经常会遇到一些问题，这篇文章将会介绍这些问题以及相应的解决方案。
问题一：Hooks 的 state 更新了但是测试代码没反应
React Hook 存在一个特性，就是状态的更新是异步的，这就导致有时候在测试代码里面判断 state 是否更新的时候，测试代码还没有等到状态更新就已经结束了，这就会引起测试的失败。
这种情况下，解决方案就是在测试代码中使用 act() 方法，确保状态已经更新完成以后再进行断言操作。
具体的示例代码如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- ---------- --- - ---- -------------------------
-------- --------- -
----- ------- --------- - ------------
----- --------- - -- -- -------------- - ---
------ -
-----
------- --------------------------------------
--------------
------
--
-
---------------- -- -- -
----- - --------- - - --------------- ----
----- ------------ - -----------------------
-----------------------------------------
------------------------------
-- --- --------- --------- ----- ----
-- -------------------------------------------
------ -- -
-------------------------------------------
---
---问题二：Hook 在测试中报错
有时候在使用 React Hook 时，在测试代码中会出现 Hook 报错的情况，这是因为 React Hook 不能在非函数组件中使用。
解决方案就是使用 jest.mock 方法来代替 Hook 方法，在测试时将 Hook 方法进行模拟。
具体的示例代码如下：
-- -------------------- ---- -------
------ - -------- - ---- --------
-------- --------- -
----- -------- ---------- - -------------
----- -------- - -- ------ -- ---- -- -
----------- ---------- -------------- ------------ ---
--
------ - --------- ------ --
-
------ ------- --------使用 useForm Hook 的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ------------
-------- ------------ -
----- - ------- -------- - - ----------
------ -
------
------ ----------- --------------- ----------------------- ------------------- --
------ --------------- --------------- ----------------------- ------------------- --
-------
--
-
------ ------- -----------针对组件 SignupForm 的测试代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- --------- - ---- ------------------------- ------ ---------- ---- --------------- ---------------------- -- -- -- -- -- ------- --- --------- -- -- -- ---- ------------- ------------ -- -- - ----- - --------- - - ------------------ ---- ----- --------- - ---------------------- -------------------------------------- ---
问题三：Mock 一个组件中使用了 Hook 的方法
有时候我们需要测试一个组件中使用了 Hook 的方法，这时候我们可以使用 jest.spyOn 方法来 mock 这个方法。
具体的示例代码如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
----- --------- - -- -- -------------- - ---
------ -
-----
--------------
------- ------------------------- -----------
------
--
-
------ ------- --------测试代码：
-- -------------------- ---- ------- ------ - ------- --------- - ---- ------------------------- ------ ------- ---- ------------ ------------------ -- -- - ----- - --------- - - --------------- ---- ----- ------------ - ---------------- ----- ----------------------------------------- ----------------- ------------ ------------------------------ ----------------------------------------------- ---
通过 jest.spyOn 方法对 React.useState 进行 mock，可以在测试时进行断言操作。
结论
在使用 Jest 进行单元测试时，React Hook 经常会遇到一些问题，但这并不妨碍我们使用 Hook 进行开发。只需要根据实际情况选择相应的解决方案，就可以轻松地解决这些问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b1be3d91dce0dc887753a