测试反应组件的指南

钥匙要点

由于其对象组成和关系，React组件是可以固有地测试的，并且它们不依赖于继承来构建可重复使用的组件，从而使测试更加容易。
• > REECT中的浅层渲染器实用程序允许隔离单个组件的单位测试，而无需DOM，可以快速，集中的测试。 REECT中的JSX语法允许通过各种JavaScript类型（例如布尔和回调）传递，从而促进了不同状态下组件的测试。 要测试与其他组件相互交织或取决于其他组件的组件，单位测试应重点关注组件的输出和交互，而不是其实现详细信息。 建议使用JEST和酶等工具来测试React组件，提供有用的功能，例如“浅渲染”和模拟功能来创建现实的测试场景。
React是一个在JavaScript开发人员社区中取得进展的框架。 React具有设计组件的强大组成框架。 React组件是您可以在Web应用程序中挥动的可重复使用代码的位。
• >反应组件并未与DOM紧密结合，但是它们可以容易单位测试？在这种情况下，让我们探讨单位测试反应组件所需的内容。我将展示使您的组件可测试的思考过程。
• >请记住，我只是在谈论单位测试，这是一种特殊的测试。 （有关各种测试的更多信息，我建议您阅读“ JavaScript测试：单位与功能与集成测试”。）
>通过单位测试，我对两件事感兴趣：快速和颈部的反馈。这样，我可以通过高度的信心和代码质量来迭代变化。这使您放心，您的反应组件不会降落在浏览器上。能够快速获得良好的反馈可以使您具有竞争优势 - 您需要在当今的敏捷软件开发世界中保留。
• >对于演示，让我们列出一个大猿的列表，可以通过复选框过滤。您可以在GitHub上找到整个代码库。为了简洁起见，我将仅显示感兴趣的代码样本。本文假定与React组件的知识水平。
• 如果您下载并运行演示示例代码，则会看到这样的页面：
>

写可测试的组件

在React中，一种很好的方法是从组成部分的层次结构开始。构建每个组件时，就会想到单一的责任原则。 React组件使用对象组成和关系。

>例如，对于大猿的列表，我有这种方法：

>

FilterableGreatApeList
|_ GreatApeSearchBar
|_ GreatApeList
   |_ GreatApeRow

来看看一个很棒的猿类列表如何具有许多具有数据的出色猿行。 React组件利用此组成数据模型，并且也可以测试。

> 在React组件中，避免使用继承来构建可重复使用的组件。如果您来自经典的面向对象的编程背景，请记住这一点。 React组件不提前知道他们的孩子。从长长的祖先延伸的测试组件可能是一场噩梦。

>我会让您自己探索过滤的GreataPelist。这是一个反应组件，这里有两个单独的组件，在这里感兴趣。也可以随时探索随附的单元测试。

> 例如，要构建可测试的GreaterApesearchBar

此组件具有带有标签的复选框，并在单击事件上进行了启动。这种方法可能已经太熟悉了，这是一件非常好的事情。

>

请注意，使用React，可以免费进行测试组件，直接从开箱即用。这里没有什么特别的 - 事件处理程序，JSX和渲染方法。>

层次结构中的下一个反应组件是伟大的，它看起来像这样：

<span>class GreatApeSearchBar extends Component {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.handleShowExtantOnlyChange = this.handleShowExtantOnlyChange.bind(this);
</span>  <span>}
</span>
  <span>handleShowExtantOnlyChange(e) {
</span>    <span>this.props.onShowExtantOnlyInput(e.target.checked);
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return(
</span>      <span><span><span><form</span>></span>
</span><span>        <span><span><input</span>
</span></span><span>          <span>id<span>="GreatApeSearchBar-showExtantOnly"</span>
</span></span><span>          <span>type<span>="checkbox"</span>
</span></span><span>          <span>checked<span>={this.props.showExtantOnly}</span>
</span></span><span>          <span>onChange<span>={this.handleShowExtantOnlyChange}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><label</span> htmlFor<span>="GreatApeSearchBar-showExtantOnly"</span>></span>Only show extant species<span><span></label</span>></span>
</span><span>      <span><span></form</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

这是一个具有GreatPaperow组件的React组件，并且使用对象组成。这是React在工作中最强大的组成模型。请注意，当您构建可重复使用但可测试的组件时缺乏继承。

> 在编程中，对象组成是一种设计模式，可以启用数据驱动的元素。以另一种方式想到这一点，一个伟大的人拥有许多伟大的对象。 UI组件之间的这种关系推动了设计。 React组件内置了这种心态。这种查看UI元素的方式使您可以编写一些不错的单元测试。

>在这里，您可以检查来自复选框的this.props.showextantonly标志。此ShowExtantonly属性通过greatepesearchbar的活动处理程序设置。

对于单位测试，您如何单位测试反应组件取决于其他组件？彼此交织在一起的组件怎么样？这些是我们很快进行测试时要记住的好问题。 React组件可能仍有一个可以解锁的秘密。

<span>class GreatApeList extends Component {
</span>  <span>render() {
</span>    <span>let rows = [];
</span>
    <span>this.props.apes.forEach((ape) => {
</span>      <span>if (!this.props.showExtantOnly) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>
        <span>return;
</span>      <span>}
</span>
      <span>if (ape.isExtant) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>      <span>}
</span>    <span>});
</span>
    <span>return (
</span>      <span><span><span><div</span>></span>
</span><span>        {rows}
</span><span>      <span><span></div</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

>

目前，让我们看一下包含Great Ape数据的Greataperow：

有反应组件，将每个UI元素隔离而要点重点是单个关注点。在单元测试方面，这具有关键优势。只要您坚持这种设计模式，您就会发现编写单元测试是无缝的。

测试实用程序

在测试REACT组件时，让我们回顾一下我们最大的关注点。如何隔离单元测试单个组件？好吧，事实证明，有一个漂亮的实用程序使您能够这样做。

>React中的浅渲染器使您可以使组件深入一个水平。由此，您可以主张有关渲染方法的事实。值得注意的是它不需要DOM。

使用ES6，您可以使用它：

>

为了使单位测试快速运行，您需要一种隔离测试组件的方法。这样，您可以专注于一个问题，对其进行测试，然后转到下一个问题。随着解决方案的增长，这将变得赋予能力，并且您可以随意重构 - 保持靠近代码，进行快速更改并获得放心，它将在浏览器中起作用。

>这种方法的一个优点是，您对代码有更好的思考。这会产生解决当前问题的最佳解决方案。当您没有束缚很多干扰时，我发现它会解放。人脑一次在处理多个问题方面做得非常糟糕。

FilterableGreatApeList
|_ GreatApeSearchBar
|_ GreatApeList
   |_ GreatApeRow

>

唯一剩下的问题是，这个小实用程序可以将我们带到React组件多远？

将其全部放在一起

例如，

看伟大主义者。您要解决的主要问题是什么？此组件向您显示了基于过滤器的大猿的列表。

>有效的单元测试是通过列表中的一个，并检查有关此反应组件的事实。我们要确保它根据标志过滤大猿。

一种方法是这样做：

>

请注意，我正在使用开玩笑测试React组件。有关此事的更多信息，请查看“如何使用开玩笑测试反应组件”。

> 在JSX中，请看一下Showextantonly = {true}。 JSX语法允许您为您的React组件设置状态。这为给定特定状态打开了许多单位测试组件的方法。 JSX了解基本的JavaScript类型，因此一个真正的标志将其设置为布尔值。

>

>列表，greaterapesearchbar呢？它在Onchange属性中具有此事件处理程序，这可能是感兴趣的。

<span>class GreatApeSearchBar extends Component {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.handleShowExtantOnlyChange = this.handleShowExtantOnlyChange.bind(this);
</span>  <span>}
</span>
  <span>handleShowExtantOnlyChange(e) {
</span>    <span>this.props.onShowExtantOnlyInput(e.target.checked);
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return(
</span>      <span><span><span><form</span>></span>
</span><span>        <span><span><input</span>
</span></span><span>          <span>id<span>="GreatApeSearchBar-showExtantOnly"</span>
</span></span><span>          <span>type<span>="checkbox"</span>
</span></span><span>          <span>checked<span>={this.props.showExtantOnly}</span>
</span></span><span>          <span>onChange<span>={this.handleShowExtantOnlyChange}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><label</span> htmlFor<span>="GreatApeSearchBar-showExtantOnly"</span>></span>Only show extant species<span><span></label</span>></span>
</span><span>      <span><span></form</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

>

一个好的单位测试是这样做：

要处理和测试事件，您使用相同的浅渲染方法。 getRenderOutput方法可用于将回调函数绑定到与事件的组件。在这里，showextantonlyInput属性将分配“回调” on Change函数。

> 在更琐碎的单元测试中，Greataperow React部分呢？它使用HTML标签显示出色的猿信息。事实证明，您也可以使用浅渲染器来测试此组件。 例如，让我们确保我们呈现图像：

具有反应组件，所有这些都以渲染方法为中心。这使得确切知道您需要测试的内容有些直观。浅渲染器使其成为这样，因此您可以在消除噪音的同时，激光专注于单个组件。

<span>class GreatApeList extends Component {
</span>  <span>render() {
</span>    <span>let rows = [];
</span>
    <span>this.props.apes.forEach((ape) => {
</span>      <span>if (!this.props.showExtantOnly) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>
        <span>return;
</span>      <span>}
</span>
      <span>if (ape.isExtant) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>      <span>}
</span>    <span>});
</span>
    <span>return (
</span>      <span><span><span><div</span>></span>
</span><span>        {rows}
</span><span>      <span><span></div</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

结论

如图所示，反应组件非常可测。没有任何借口为您的组件撰写良好的单位测试。

>

好的是，JSX在每个单独的测试中都适合您，而不是对您不利。使用JSX，您可以传递布尔值，回调或其他需要的内容。当您自己冒险进行单位测试时，请记住这一点。

>

>浅渲染器测试实用程序为您提供了良好的单位测试所需的一切。它仅使一个级别深入一个水平，并允许您隔离测试。您不关心层次结构中可能会打破单位测试的任何任意孩子。

>使用笑话工具，我喜欢它如何仅在要更改的特定文件上为您提供反馈。这会缩短反馈循环并增加激光焦点。希望您能在解决一些棘手的问题时看到这有多有价值。

>

经常询问有关测试REACT组件的问题（常见问题解答）

测试REACT组件的最佳实践是什么？

测试React组件的最佳实践包括编写一次验证一个功能的小型，集中的测试。这使识别和解决问题变得更加容易。此外，重要的是要测试组件的输出，而不是其实现细节。这意味着检查用户看到并与之交互，而不是组件如何实现它。最后，使用专门设计用于测试React组件的JEST和酶之类的工具。它们提供了有用的功能，例如“浅渲染”，可以使您的测试更有效。它特别适合测试反应组件。要使用Jest，您首先需要使用NPM或纱线将其安装在项目中。然后，您可以使用Jest提供的描述和IT功能编写测试。在IT功能内部，您可以使用期望断言满足某些条件。 JEST还提供了一个模拟功能来创建模拟功能，这对于测试组件如何与应用程序的其他部分进行交互很有用。

>

>酶在测试React组件中的作用是什么？ >酶是React的JavaScript测试实用程序，它使测试组件更容易。它提供了以不同方式渲染组件的功能，包括“浅渲染”，仅呈现组件本身而没有其子组件。这可以使您的测试更快，更专注。酶还提供了模拟用户交互的功能，例如单击按钮，并检查组件的输出。

>。

>如何测试我的React组件中的用户交互？

>在React组件中测试用户交互涉及模拟用户的操作并检查组件是否正确响应。这可以使用酶提供的模拟函数来完成。例如，您可以在按钮上模拟单击事件，然后检查组件的状态或道具是否如预期更改。同样重要的是要测试您的组件是否正确处理用户输入，例如，当用户填写用户并单击“提交”按钮时，表单是否提交正确的数据。

>

>我如何确保我的反应组件如何可以访问吗？

>确保您的React组件中的可访问性涉及遵循最佳实践，例如使用语义HTML，为图像提供替代文本，并确保可以与键盘一起使用您的组件。您还可以使用Jest-Axe之类的工具，即Jest-axe，用于测试可访问性，自动检查组件是否有常见的可访问性问题。此外，重要的是要使用屏幕读取器和其他辅助技术测试组件，以确保它们确实可以访问。

>

>我如何测试我的React组件的性能？可以使用React Profiler完成您的React组件，该工具可以测量React应用程序渲染的频率以及渲染的“成本”是多少。这可以帮助您识别渲染过多或花费太长时间渲染的组件，这可以减慢您的应用程序。您还可以使用浏览器工具（例如Chrome DevTools Performance面板）来衡量应用程序的整体性能，包括网络请求和JavaScript执行时间之类的因素。

>

>我如何用不同的道具测试我的反应组件？ >

可以使用酶提供的SETProps函数来测试用不同的道具进行反应组件。这使您可以在组件渲染后更改该组件的道具，然后检查其是否正确响应。例如，您可以测试一个组件在给出不同的文本道具时显示正确的文本，或者它可以正确处理可选的道具。

>

>如何在不同的浏览器中测试我的反应组件？可以使用Browstack或Sauce Labs等工具来完成不同浏览器中的React组件。这些工具使您可以在真实设备上的真实浏览器中运行测试，这可以帮助您捕获特定于浏览器的错误。在不同的浏览器中手动测试组件也很重要，因为自动测试有时会错过视觉问题或可用性问题。

>如何使用不同的屏幕尺寸测试我的反应组件？

>可以使用浏览器开发人员工具中的响应式设计模式来测试使用不同屏幕尺寸的React组件。这使您可以模拟不同的屏幕尺寸和分辨率，并检查您的组件是否在它们上看起来和工作正确。您还可以使用Browstack或Sauce Labs之类的工具在具有不同屏幕尺寸的真实设备上运行测试。

>如何用不同的用户角色测试我的React组件？具有不同用户角色的组件涉及模拟不同类型的用户的动作，并检查您的组件是否正确响应。例如，您可能会测试某些功能仅适用于登录用户，或者管理用户看到的界面与常规用户不同。这可以使用酶提供的模拟函数来完成，并设置测试以使用不同的用户角色。

以上是测试反应组件的指南的详细内容。更多信息请关注PHP中文网其他相关文章！