介绍
unexpected-react是一个npm包，它提供了一种使用断言测试React组件的方法。这个npm包使测试React组件变得简单，易于阅读，并且易于维护。
在本篇文章中，我将介绍如何安装和使用unexpected-react npm包，并使用一些示例代码来演示如何测试React组件使用该npm包的方法。
安装
首先，您需要确保已安装Node.js和npm。之后，您可以使用以下命令在项目中安装unexpected-react：
--- ------- ---------- ----------------
使用
现在，安装了unexpected-react，您可以在测试用例中使用它。为了更好地演示，我们将使用Jest进行我们的测试。
下面是一个简单的示例，展示如何在Jest测试中使用unexpected-react：
------ - ------- - ---- ---------
------ ---------- ---- -------------
------ --------------- ---- -------------------
------ ----------- ---- ----------------
----- ------ - ----------------------------------------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
--------------- --- ---- ---------- ---------- --------------
---
---在上面的代码中，我们添加了unexpectedReact插件并使用它对shallow Wrappers进行了扩展。然后，我们使用“to have rendered”断言断言渲染有特定的React元素。
可以对组件树的每个部分使用相同的技术来测试，因为unexpected-react允许您在单个断言中包含多个React元素，以便测试标签，属性以及子元素等等。
示例代码
现在，在接下来的示例中，我们将为您提供一些实际应用的使用案例。
假设您正在编写一个购物车组件，其中包含一个用于添加产品的表单。针对此表单我们可以进行以下测试：
------------------------ -- -- -
---------- - ------- -- -- ----- -- --- ------ -- -- -
----- ------- - --------------------- ----
------------------------------------------------ - ------- - ------ ------- - ---
------------------------------------------------- - ------- - ------ -- - ---
--------------------------------------- - --------------- -- -- -- ---
--------------- --- --------- -
-----
----
---------- --------
-----
------
---
---
---此测试假设ShoppingCart组件包含一个表单，其中包含#product-name，#product-price，form元素。
以上测试中的代码片段演示了如何使用simulate方法模拟表单事件并检查渲染的组件是否具有正确的状态。
另一个示例是测试组件是否执行异步操作。针对此用例我们可以使用下面的方式进行测试:
------ ----- ---- --------
----------------------- -- -- -
--------- ---- ---------------- -- -- -
-- ----------------
----- -------- - -- --- -- ----- --------- ---
----- ------- - ------------------------------
--------------------------------- - --------
----- ------- - ------------------ ----
------------------------------------- --- -- --------
------ ---------------------------------------------- -- -
-- --------- --------------
---------------------------------- ----- --- ---- -------- ---
---
---
---对于以上测试中的代码片段演示了如何使用Sinon来创建一个假API，并模拟异步数据加载。然后，我们在组件生命周期中使用componentDidMount方法调用该函数，并检查在我们模拟的数据过程中渲染是否正确。
总结
在本篇文章中，我们首先讨论了unexpected-react npm包，该包使React组件的测试更加容易和可读，并且具有高度维护性。然后，我们提供了有关在测试用例中使用该“npm包”的详细指南和示例代码。
如果您正在编写React组件并编写测试用例，请考虑使用unexpected-reactnpm包。它可以使用强大的断言语法来提高代码质量和可读性，同时还可以提高生产线的可靠性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/61292