React 是一种流行的前端框架，它提供了一种声明式的方式来构建用户界面。在开发 React 应用程序时，测试是至关重要的。在本文中，我们将介绍测试 React 组件时常用的断言和 Enzyme API，并提供一些示例代码。
断言
断言是测试中的重要组成部分。它们是用于判断预期输出和实际输出之间差异的代码块。在 React 组件测试中，我们可以使用一些常用的断言。
toBe
这是最基本的断言，用于比较两个值是否完全相等。在测试 React 组件时，我们可以使用它来比较组件的渲染输出和预期输出是否相同。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
--------------------------------------------- --------
---
---在这个示例中，我们使用了 toBe 断言来比较 <MyComponent /> 组件渲染后的 <h1> 元素的文本内容是否为 'Hello World'。
toEqual
toEqual 断言用于比较两个对象是否相等。在测试 React 组件时，我们通常使用它来比较组件的状态或属性是否符合预期。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----- ----------- -- -- -
----- ------- - -------------------- ----
-----------------------------------------
------------------------------------------
---
---在这个示例中，我们使用了 toEqual 断言来比较 <MyComponent /> 组件在模拟点击按钮后更新状态后的 count 属性是否为 1。
toContain
toContain 断言用于判断一个数组或字符串是否包含某个元素或子字符串。在测试 React 组件时，我们可以使用它来判断组件是否正确渲染了某个元素或子组件。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ - ---- -- ------- -- -- -
----- ----- - --------- --------- ----------
----- ------- - -------------------- ------------- ----
------------------------------------------------------
------------------ -- -
---------------------------------------
---
---
---在这个示例中，我们使用了 toContain 断言来比较 <MyComponent /> 组件是否正确渲染了一个包含指定元素的列表。
Enzyme API
Enzyme 是一个流行的 React 测试工具，它提供了一些有用的 API 来测试组件的渲染输出、状态和交互行为。在本节中，我们将介绍一些常用的 Enzyme API。
shallow
shallow 方法用于浅渲染一个组件，它只渲染组件的一层子组件，不包括其它嵌套组件。这使得测试更加快速和简单。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
-------------------------------------------
---
---在这个示例中，我们使用了 shallow 方法来浅渲染 <MyComponent /> 组件，并使用 find 方法来查找其中的 <h1> 元素。
mount
mount 方法用于完全渲染一个组件，包括其所有子组件。这使得测试更加真实和准确，但也会使得测试更加缓慢和复杂。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----- ----------- -- -- -
----- ------- - ------------------ ----
-----------------------------------------
------------------------------------------
------------------
---
---在这个示例中，我们使用了 mount 方法来完全渲染 <MyComponent /> 组件，并使用 simulate 方法来模拟点击按钮，然后使用 state 方法来获取更新后的状态。
simulate
simulate 方法用于模拟用户交互行为，如点击、输入等。在测试 React 组件时，我们可以使用它来测试组件的交互行为是否符合预期。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ---- ------- ------- ----------- -- -- -
----- ------- - ----------
----- ------- - -------------------- ----------------- ----
-----------------------------------------
-----------------------------------
---
---在这个示例中，我们使用了 simulate 方法来模拟点击按钮，并使用 toHaveBeenCalled 方法来判断 onClick 回调函数是否被调用过。
总结
在本文中，我们介绍了测试 React 组件时常用的断言和 Enzyme API，并提供了一些示例代码。测试是开发 React 应用程序的重要部分，它可以帮助我们保证代码的正确性和可靠性。希望本文对你有所帮助，让你更加熟练地测试 React 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d5ab47add4f0e0ffd5801a