React 应用的测试与调试

React 应用的测试与调试

不要再猜测你的代码是否有效。通过测试来建立信心。

大多数开发者跳过测试，是因为觉得配置太难。他们把测试当作一项苦差事，而不是一个安全网。

你编写测试不是为了给计算机看，而是为了给未来的自己看。当你凌晨两点修改一个函数时，测试会立即告诉你是否破坏了某些功能。

将测试想象成一个金字塔：

• 单元测试 (Unit Tests)：测试单个函数或组件。它们运行速度快且数量众多。 • 集成测试 (Integration Tests)：测试各部分如何协同工作。它们能带给你极高的信心。 • 端到端测试 (E2E Tests)：在浏览器中测试整个应用。仅将它们用于登录或结账等关键路径。

React Testing Library 的金科玉律：测试用户所看到的内容。

不要测试 state 变量。不要测试 CSS 类。不要测试内部逻辑。测试按钮、文本和输入框。如果用户看不见，就不要测试它。

遵循 Arrange, Act, Assert 模式：

• Arrange：渲染你的组件。
• Act：点击按钮或在字段中输入。
• Assert：检查屏幕上是否出现了正确的文本。

对于像 API 调用这样的异步代码，请使用 waitFor。这允许你的测试在检查结果之前等待数据加载完成。

如果你的应用在生产环境中崩溃，请使用 Error Boundaries。它们可以防止单个损坏的组件导致整个页面变成白屏，并为用户提供优雅的降级方案。

快速调试清单：

• 检查浏览器控制台是否有错误。
• 检查 Network 标签页以查看 API 响应。
• 使用 React DevTools 检查 props 和 state。
• 检查你是否在直接修改 state。
• 验证你的 useEffect 依赖数组。

专注于测试重要的内容。你不需要 100% 的覆盖率。你需要覆盖那些一旦失败会造成严重后果的功能。

来源：https://dev.to/kushang_tailor/testing-debugging-react-apps-write-code-you-can-actually-trust-5334