解决 Enzyme 在 React v16.4 中的一些问题

前言

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