提升你的 React 测试技能，包括 Redux Saga、React Router 和受认证保护的路由！

你将会学到的

  • 使用 redux-saga-test-plan 集成和单元测试来测试 Redux Sagas
  • 创建一个自定义的 React Testing Library `render`方法，用于 Redux 存储和 React Router 历史记录
  • 测试 React Router 导航，包括带有 URL 参数和查询参数的路由
  • 测试使用 React Router 的 React 应用中的受认证保护的路由
  • 使用 Mock Service Worker 在测试期间模拟网络响应
  • 使用 Jest 的 `.each()`方法来参数化测试（使用不同数据多次运行相同的测试）

要求

  • 熟悉 React 和 React Hooks（包括自定义 Hooks 和内置 Hooks 如 `useEffect`）
  • 具有使用 Jest 编写测试的经验
  • 基本熟悉 React Testing Library（特别是 `render` 和 `screen`方法）
  • 使用 Redux 和 Redux Saga（仅限 Saga 部分）
  • 使用 React Router（仅限 React Router 和受认证保护的路由部分）
  • 熟悉 TypeScript（本课程完全使用 TypeScript 编写和教授）

说明

如果您是一名已经掌握了 React 测试基础知识的开发者，并希望进一步提升自己的技能，那么本课程将深入探讨如何为复杂的 React 应用进行测试。

测试 Redux Saga、React Router 或两者

课程中的 Redux Saga 和 React Router 部分是完全独立的。您可以根据自己的需求选择从哪一部分开始学习，并跳过与您的应用无关的部分。

测试现有应用

本课程提供的应用已经构建完成，因此您将对一个使用了 Redux Saga 和 React Router（包括受认证保护的路由）的现有应用进行测试。为了增加乐趣，这个应用是一个为虚拟乐队售票的音乐场馆，其中包含了虚构的乐队名称、随机生成的乐队描述和照片。

redux-saga-test-plan

使用 redux-saga-test-plan 库来测试 Redux Sagas，这是一个强大的模块，允许灵活的集成测试和精确的单元测试。课程涵盖了 provide()方法，用于静态和动态效果的模拟。

React Router

课程创建了一个自定义的 Testing Library render 方法，用于编写既可以断言页面行为也可以断言 React Router history 对象的测试。测试的路由包括 URL 参数和查询参数，以及受认证保护的路由流程（包括从历史记录中移除登录页面）。Mock Service Worker 为服务器调用提供模拟数据。

Jest 的 test.each()

在 Redux Saga 部分和 React Router 部分，课程将教授如何使用 Jest 的 test.each()方法来参数化测试（即使用不同的数据多次运行相同的测试）。

TypeScript

遵循现代 JavaScript 的最佳实践，本课程的所有代码都是通过 TypeScript 进行类型化的。

经验丰富的讲师

本课程的讲师自 2018 年起就在 Udemy 上编写课程，她有着出色的授课记录，课程内容清晰易懂。她喜欢通过问答与学生互动，并以平和、支持的教学风格著称。

此课程面向哪些人

有经验的 React 开发者，希望扩展他们的测试工具箱。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。