使用 JEST 对 React 进行 UI 测试——最常见的测试模式（第 4 部分）

使用 JEST 对 React 进行 UI 测试——最常见的测试模式（第 4 部分）

React/Jest 传奇中的这一章提供了项目中各种类型的测试和测试库的常见用法的广泛示例列表。对于故事的前两章，请查看 第1部分 , 第2部分 和 第 3 部分 .

Photo by 劳塔罗·安德里亚尼 on 不飞溅

测试组件：通过查询元素断言

如果您想测试 ( 断言 ) 在一个简单的动作之后 ( 这立即发生 )，就像渲染组件一样，组件包含特定的文本/元素

此示例呈现一个小部件 ( 卡片小部件 ) 如果该州的帐户有任何卡片，则将显示卡片列表，否则显示“未附加卡片”消息。它将状态模拟为没有卡片，并举例说明了两种检查是否显示正确消息的替代方法。这依赖于消息在渲染时直接显示（例如，通过 IF）这一事实，而不是基于某些延迟的操作或生命周​​期事件。为此，有以下示例。

测试组件：触发事件并期望文档/组件做出反应

如果您想测试 ( 断言 ) 调用动作后 ( 喜欢点击 )，组件发生变化。

这个例子呈现了一个泛型 标签 组件，它有一个选项卡列表，默认选择第一个。然后它使用 火灾事件 触发事件（ 点击 在这种情况下）并期望发生更改（要选择的第二个选项卡）。这可以扩展到任何事件，而不仅仅是单击。此示例还依赖于组件中的更改立即发生并且不会被某些中间事件延迟的事实。

此外，如果您想测试在某个场景中，要测试的组件是否会触发父组件的事件（或来自 道具 被调用），您可以在渲染组件时使用 jest 的模拟函数模式。

当使用 redux 连接的组件测试类似的场景时，这在以下示例中得到了进一步的推进。

测试组件：模拟 fetch API 调用（一个/全部 + URL 过滤）

当您有使用 API 调用的组件时，此模式很有用 拿来 （或调用执行 API 调用的 redux 操作，或介于两者之间的任何操作）并且您想根据需要模拟这些调用（使用数据、错误等）。模拟的这种设置可以按测试进行（如这些示例中所示），或者您可以创建自己的 API Mocks 类/实用程序，以后可以重用。这使用 获取模拟是 去工作。

正如你在这里看到的，它重用了 卡片小部件 组件，它有一个表，其中包含一些通过 API 调用在内部获取的数据。此调用在排列状态下被模拟以返回一项。然后在断言期间，进行检查以确保表有 1 行。

请注意，您还可以看到选择元素的语法 包含 他们班级列表中的一个班级（ 使用 *=)。

这种设置实际上会替换任何 fetch 调用并使它们返回相同的数据，并且可以在此处使用这种方法，因为被测组件只执行一个 API 调用，因此是否替换所有内容并不重要（ 确保在清理阶段的每个测试都重置模拟，但这应该是任何框架中任何测试套件的标准做法 ）。如果您只需要替换对 URL 的特定调用（或者甚至确定是否执行了此类调用），则可以使用以下模式：

如果您想假装调用因 API 错误而被拒绝，您可以使用 fetch.mockReject(new Error("fetch failed"); 在安排阶段。

作为一个 奖金 在这里，在模拟 API 调用时，如果您不想直接模拟 拿来 并在类/模块中声明使用的调用，然后您可以 模拟模块导入， 就像是：

测试组件：模拟 redux 的 dispatch & verify redux actions 被调用

这种模式在使用时很有用 还原 至 派遣 操作，并且您想验证在某个事件之后是否调度了特定操作。它依赖于设置 模拟的 redux 商店 （在本系列的第 3 部分中描述）。

notificationActions.openNotification 这是来自应用程序的实际操作，断言检查是否在获取失败时调用了它。

如果您有一个场景，您想要调度操作，然后对更改做出反应（再次使用模拟存储），您可以简单地使用：

这将触发该分派将触发的所有进程（例如，API 调用、状态更新、组件更新等）。

此外，如果你想，出于某种原因，使用 真实调度 但还需要检查它是否被调用或进行一些自定义检查，您可以使用类似于此的模式（保留原始调度的引用，并用模拟函数包装它）：

测试组件：更改全局常量和断言样式

当您需要更改全局环境变量或全局导出常量的值时，此模式很有用。它还展示了如何为样式断言组件（ 样式不需要是声明性的，可以从类等继承。 )

测试组件：假计时器、加载器和模拟 API 调用的替代方案

当您想要控制基于时间的方法（如 设置超时 解决（这意味着时间并不重要，您可以决定计时器何时完成/运行等）。

测试的组件显示加载屏幕，直到 API 调用返回（成功/错误），所以我们测试加载是否真的一直持续到“请求”完成。为了实现这一点，API 调用使用 Promise 进行模拟，仅在 setTimeout 完成时才解析（ 这又在何时结束 _is.runAllTimers()_ 运行 ) => 在这 2 点之间，加载应该打开，然后消失。

测试 Redux 操作

此模式有助于防止在创建 redux 操作或更新它们时（甚至在声明它们的命名空间/命名等时）发生错误

测试 Redux 减速器

这种模式对于确保减速器在给定动作类型的情况下正确地转换状态很有用。

用酶测试未连接的组件

如果你使用的是 Redux，那么几乎所有的组件通常都与全局存储、redux 等连接；和 测试通常不应该关心它们的内部状态，而应该更关心它们的行为方式 （检查第 1 部分）。但是在某些情况下，组件没有与全局存储连接，不关心子组件，并且还需要对其内部功能的某些部分进行模拟或测试。

为了这， 酶 被使用，它是 jest 的扩展并且使用了一些 ' 浅的 ' 用于测试隔离组件的渲染机制。下面是一个简单的例子：

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/27158/26371109