React 组件测试指南

React 是一个在 JavaScript 开发者社区中取得进展的框架。React 有一个强大的组合框架来设计组件。React 组件是您可以在 Web 应用程序中使用的可重用代码。 Pause Next Unmute Current Time 0:12 / Duration 2:00 Fullscreen React 组件与 DOM 并不紧密耦合，但它们的单元测试有多容易？在本次尝试中，让我们探讨一下如何对 React 组件进行单元测试。我将展示使您的组件可测试的思维过程。 请记住，我只是在谈论单元测试，这是一种特殊的测试。（有关不同类型测试的更多信息，我建议您阅读“ JavaScript 测试：单元测试、功能测试、集成测试”。） 对于单元测试，我对两件事感兴趣：快速且令人紧张的反馈。有了这个，我可以以高度的信心和代码质量迭代更改。这让您在一定程度上放心，您的 React 组件不会在浏览器上死机。能够快速获得良好的反馈可以为您带来竞争优势——您希望在当今敏捷软件开发的世界中保持这一优势。



对于演示，让我们制作一个类人猿列表，可以通过复选框进行过滤。您可以在GitHub上找到整个代码库。为了简洁起见，我将仅显示感兴趣的代码示例。本文假设您具备 React 组件的工作知识水平。 如果您下载并运行演示示例代码，您将看到如下页面： React 组件中 WhatsApp 号码数据 的 Great Apes 演示 编写可测试组件 在 React 中，一个好的方法是从组件层次结构开始。在构建每个单独的组件时，我们会想到单一责任原则。React 组件使用对象组合和关系。 例如，对于类人猿的列表，我有以下方法： FilterableGreatApeList |_ GreatApeSearchBar |_ GreatApeList |_ GreatApeRow 看看一个伟大的猿列表如何包含许多带有数据的伟大猿行。React 组件利用了这种组合数据模型，并且它也是可测试的。 在 React 组件中，避免使用继承来构建可重用的组件。如果您有经典的面向对象编程背景，请记住这一点。React 组件并不提前知道它们的子组件。




测试源自一长串祖先的组件可能是一场噩梦。 我会让你FilterableGreatApeList自己探索。它是一个 React 组件，具有两个我们感兴趣的独立组件。也可以随意探索它附带的单元测试。 GreatApeSearchBar例如，要构建可测试的，请执行以下操作该组件有一个带有标签的复选框，并连接了一个单击事件。这种方法对你来说可能已经太熟悉了，这是一件非常好的事情。 请注意，使用 React，可测试的组件是免费的，开箱即用。这里没有什么特别的——事件处理程序、JSX 和渲染方法。 层次结构中的下一个 React 组件是GreatApeList，它看起来像这样组件并且使用对象组合的 React 组件。这是 React 最强大的组合模型。请注意，当您构建可重用且可测试的组件时，缺乏继承。 在编程中，对象组合是一种支持数据驱动元素的设计模式。换句话说，aGreatApeList有很多GreatApeRow对象。正是 UI 组件之间的这种关系驱动了设计。