前言
Enzyme 是 React 测试工具库中的重要成员,它具备了形如 jQuery 的 API,使得 React 组件的测试变得更加简单和可读性更高。但是,随着 React 不断更新迭代,Enzyme 也遇到了一些针对 React v16.4 的问题。
本篇文章主要介绍了通过一些基本的调整和技巧,解决 Enzyme 在 React v16.4 中出现的一些问题的方法。
##问题描述
React v16.4 以前的版本中,虚拟 DOM 的渲染是同步的,但是在 React v16.4 之后,渲染虚拟 DOM 变成了异步的。这使得 Enzyme 在渲染 React 组件时出现了一些问题。
具体来说,主要体现在 Enzyme 的渲染和断言过程中。
渲染问题
在 React v16.4 中,Enzyme 中的 shallow()
和 mount()
函数中,虚拟 DOM 渲染变成了异步的。
这意味着,在 Enzyme 中,与 React 的生命周期函数一起工作的模拟时机就会发生变化。在这种情况下,这些模拟需要等待 React 执行完生命周期方法,才能在 Enzyme 中进行更进一步的断言。
例如,我们以一个简单的 React Axios 应用为例:
------ ------ - --------- - ---- -------- ------ ----- ---- -------- ------ ----- -------- ------- --------- - ----------- ------- - ------------- ---------- - - ----- --- -------- ---- -- - ----------------- -- - --------------------------------------------------------- --------- -- - --------------- ----- --------- -------- ----- --- --- - ------ -- - ----- - -------- ---- - - ----------- ------ - ----- -------- - ------------ - --------------- -------------------- ----------------- ------------------------ ------ -- - -
我们可以使用 shallow()
把 AxiosGet 组件浅渲染一下,然后根据状态及加载情况来进行断言:
------ ----- ---- -------- ------ - ------- - ---- --------- ------ - -------- - ---- ------------- --------------- ---- ------- -- -- - ----------- ----- ------ -- -- - ----- ------- - ----------------- ---- ----------------------------------------------- ------------- -- - --------------------------------------- ------- ----------- --- ------ ------------- -- ------ --- ---
该测试不会通过,因为在 Enzyme 进行断言之前,由于虚拟 DOM 的异步渲染,Axios 请求还未完成,组件还在等待返回。
断言问题
在 React v16.4 中,Enzyme 中的 setState()
函数也变成了异步的。这意味着,在 setState()
之后进行的断言可能会出现一些问题,因为在最后更新之前,断言会在组件更新之前触发。
例如,我们以一个非常简单的 React 组件为例:
------ ------ - --------- - ---- -------- ----- ------- ------- --------- - ----------- ------- - ------------- ---------- - - ------ - -- - -------------- - -- -- - --------------- ------ ---------------- - - --- -- ------ -- - ----- - ----- - - ----------- ------ - ---- ------------------------------ --- ---------------------------------------------- ------- ---------------------------- ---------------------------------------- ------ -- - - ------ ------- --------
我们使用 mount()
将组件装载到虚拟 DOM 中,并对其进行交互和断言:
------ ----- ---- -------- ------ - ----- - ---- --------- ------ ------- ---- ------------ ----------------- ---- ------- -- -- - --- -------- ------------- -- - ------- - -------------- ---- --- ------------ -- - ------------------ --- ------------- ------ ------ ------- -------- -- -- - ----- ------- - ------------------------------------------------ ------------------------------- --- --------------- ------ ------ -------- --- --------- -- -- - ----- ------ - ----------------------------------------------- ----- ------- - ---------------------------------------------- ------------------------------------ ------------------------- ------------------------------------ --- ---
我们会发现,这个测试不会通过,因为启动检查和 Enzyme 状态更新之间的时间差异。当我们模拟点击增量按钮时,执行了 setState()
,而不是直接修改状态,所以断言错误地把旧状态与增量相加,而不是新状态。
解决方法
渲染问题
在工程项目中,我们可以尝试创建一个 async
函数。这个函数将会在传入了一个 React 组件的 Promise
上进行解析、解包和断言。将这个函数封装用到底层的 requestAnimationFrame
中,就可以使得每一次组件状态变化都能适当地等待。
-- ------------ ------ ----- -------- --- --------- - ----- ------------------ ----------------- - ------ ----- -------- ------------------ --------- ------ - ----- ------------- -- ------- - -------- - -
现在我们可以使用这个 testAsyncComponent
函数来解决异步渲染测试的问题:
------ ----- ---- -------- ------ - ------- - ---- --------- ------ - -------- - ---- ------------- ------ - ------------------ - ---- -------------- --------------- ---- ------- -- -- - ----------- ----- ------ ----- -- -- - ----- ------- - ----- ----------------- ---- ----------------------------------------------- ----- ------------- --------------------------------------- ------- ----------- --- ------ ------------- --- ---
断言问题
在断言方案中,我们可以在组件 mount 后,通过组件实例对 setState()
进行修改。这将为 Enzyme 和 React 生命周期函数提供相同的上下文,使得它们同步化,从而解决了我们遇到的问题。
------ ----- ---- -------- ------ - ----- - ---- --------- ------ ------- ---- ------------ ----------------- ---- ------- -- -- - --- -------- ------------- -- - ------- - -------------- ---- --- ------------ -- - ------------------ --- ------------- ------ ------ ------- -------- -- -- - ----- ------- - ------------------------------------------------ ------------------------------- --- --------------- ------ ------ -------- --- --------- -- -- - ----- ------ - ----------------------------------------------- --------------------------------------- ------------------------- --------------------------------------- --- ---
在这个示例中,我们使用了 mount(),因为它与 React 生命周期进行更紧密的集成。
结论
通过尝试针对 Enzyme 和 React v16.4 的不同工作方式进行微调或使用特殊技巧,可以解决许多 Enzyme 在渲染和断言时出现的问题。
使用 async
和 Enzyme 的 update()
函数结合使用,我们可以解决 Enzyme 中异步渲染的测试问题。同时,在断言状态更新方面,可以尝试直接修改实例的 state 状态,避免 Enzyme 状态更新之间的时间差异。
这些方法对 Enzyme 或 React 的工作方式不是理解,而是一个真正的经验问题。使用上述方法可以帮助开发者在 Enzyme 和 React v16.4 的情况下高效地构建和测试组件。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67186a8ead1e889fe22ae99a