使用 Enzyme 测试 React 组件时遇到的 warning: ReactTestUtils has been moved to react-dom/test-utils warning 问题

阅读时长 4 分钟读完

在前端开发中,React 是非常流行的框架之一,而 Enzyme 则是 React 组件测试过程中常用的工具之一。Enzyme 提供了一系列 API,可以方便我们对 React 组件进行测试。然而,有时在使用 Enzyme 进行测试时,会遇到 warning: ReactTestUtils has been moved to react-dom/test-utils 的提示信息,这会让我们感到十分困惑。本文将会详细介绍这个 warning 的出现原因以及解决方法,希望能对大家有所帮助。

问题产生的原因

首先,我们来看一下这个 warning 的提示:

也就是说,这个 warning 是由于我们在测试 React 组件的时候,使用了 ReactTestUtils 相关的 API,但是 ReactTestUtils 已经被移动到了 react-dom/test-utils 库中,在新版的 React 中,ReactTestUtils 已经被标记为过时,并推荐使用 react-dom/test-utils 代替。因此,当我们在使用 Enzyme 的时候,如果还使用了 ReactTestUtils 相关的 API,就会触发这个 warning。

解决方法

那么,如何解决这个问题呢?其实解决起来也非常简单,只需要将我们在测试组件中使用的 ReactTestUtils 相关的 API,全部替换成 react-dom/test-utils 中对应的 API 即可。

以 shallow 渲染为例,我们可以将原来的代码:

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ - -------------- - ---- ------------------------------
------ ----------- ---- ----------------

----- -------- - -----------------

------------ ----------- -- -- -
  ---------- -------- -- -- -
    ---------------------------- ----
    ----- ------ - ---------------------------

    ----- ------- - ----------------
    ----------------------------------
  ---
---

修改成如下代码:

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ - -------------- - ---- ------------------------------
------ ------------ ---- -----------------------
------ ----------- ---- ----------------

----- -------- - -----------------

------------ ----------- -- -- -
  ---------- -------- -- -- -
    ---------------------------- ----
    ----- ------ - ---------------------------

    ----- ------- - ----------------------------------------------
    ----------------------------------
  ---
---

通过添加 TestRenderer,我们成功地将代码中使用的 ReactTestUtils 相关的 API 替换成了 react-dom/test-utils 中对应的 API。

关于其他方法的替换,可以查看官方文档:ReactTestUtils has been moved to react-dom/test-utils.

总结

本文通过详细的介绍,解决了使用 Enzyme 进行 React 组件测试时遇到的 warning: ReactTestUtils has been moved to react-dom/test-utils 的问题。虽然这个问题看起来比较小,但是却很可能给我们带来不必要的麻烦,因此建议大家在使用 Enzyme 进行测试时,时刻注意警告信息,及时更换被标记为过时的 API。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6520d54895b1f8cacd848fa8

纠错
反馈