介绍
在前端开发中，我们经常需要编写单元测试来保证代码的正确性。在 React 开发中，有时需要针对渲染后的组件进行测试，这个时候就需要使用类似于 HTML 的组件渲染适配器。接下来，我们将介绍一个强大的 npm 包：unexpected-htmllike-reactrendered-adapter，它可以让我们使用 unexpected 库来轻松地测试渲染后的组件。
安装
首先需要安装 unexpected 和 unexpected-htmllike-reactrendered-adapter 。
npm install --save-dev unexpected unexpected-htmllike-reactrendered-adapter
使用
下面我们将演示如何在测试中使用这个适配器。
基于 shallow 渲染
我们首先需要使用 React 的 shallow 渲染器，这个渲染器可以快速渲染一个组件，但是它只渲染了组件的顶层节点。
-- -------------------- ---- -------
------ - ----- - ---- --------
------ - ------- - ---- ---------
------ - ------ - ---- -------------
------ - -------------------- - ---- --------------------------------------------
----- ----------- - -- -- -
---- -------------------------
--------- ----------
------- -- - --------------
------
--
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
--------------- ----- --------- --------------------- --- ---- ---------- ---- ---------------------------------- ----------------- -- - ----------------------
---
---在这个例子中，我们使用了 with adapter 语句，将 adapter 设置为 ReactRenderedAdapter。然后使用 to have rendered 语句断言渲染结果是否符合预期。
基于 mount 渲染
如果需要渲染更深层次的组件，我们需要使用 mount 渲染器。这个渲染器会完全渲染组件，包括所有子组件。
-- -------------------- ---- -------
------ - ----- - ---- --------
------ - ----- - ---- ---------
------ - ------ - ---- -------------
------ - -------------------- - ---- --------------------------------------------
----- ----------- - -- -- -
---- -------------------------
--------- ----------
------- -- - --------------
------
--
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - ------------------ ----
--------------- ----- --------- --------------------- --- ---- ---------- ---- ---------------------------------- ----------------- -- - ----------------------
---
---在这个例子中，我们使用了 with adapter 语句，并将 adapter 设置为 ReactRenderedAdapter。然后使用 to have rendered 语句断言渲染结果是否符合预期。
总结
通过使用 unexpected-htmllike-reactrendered-adapter，我们可以在测试中方便地使用 unexpected 库来测试渲染后的组件。它是一个非常强大的工具，可以大大提高我们的测试效率和准确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc062b5cbfe1ea0611c8f