人类的反应组件测试

制定有效的反应组件测试应直观，直接且易于维护。但是，当前的测试库生态系统通常会落后，阻碍开发人员始终如一地编写强大的JavaScript测试。测试REACT组件，DOM经常需要在Jest或Mocha等流行的测试跑者周围更高级别的包装纸。

挑战：乏味而令人困惑的测试

当前的测试方法通常证明是乏味而令人困惑的。表达测试逻辑的类似jQuery的链式风格很麻烦，并且与React的组件体系结构不符。即使是使用酶的看似可读的代码也可能变得过于冗长：

期待（screet.find（“。查看”）。hasclass（“ Technologies”）。to.equal（true）;
期待（screen.find（“ h3”）。text（））。to equal（“ Technologies：”）;
期望（screet.find（“ ul”）。儿童（））。
期待（屏幕。
  // ...
]））。
期待（screen.find（“ button”）。text（））。to equal（“ back”）;
期待（screet.find（“ button”）。hasclass（“ small”））。to. equal（true）;

这对应于一个相对简单的DOM结构：

<div classname="view technologies">
  <h3 id="技术">技术：</h3>
  <ul>
<li>JavaScript</li>
<li> Reactjs</li>
<li> nodejs</li>
<li> webpack</li>
</ul>
  <button classname="small">后退</button>
</div>

测试更复杂的组件会放大这些问题，从而使过程更加笨拙。 React生成HTML的原理与测试方法之间的断开连接导致效率低下且难以维护的测试。简单的JavaScript链接不足以用于长期可维护性。

出现了两个关键问题：

• 特定于组件的测试方法：如何有效编写针对组件行为的测试。
• 最小化冗余：如何消除不必要的代码并提高测试可读性。

让我们在探索实际解决方案之前解决这些问题。

一种反应组件测试的重点方法

考虑基本的反应组件：

欢迎功能（道具）{
  返回<h1 id="你好-props-name">你好，{props.name}</h1> ;
}

此功能接受props并使用JSX返回DOM节点。由于组件本质上是功能，因此测试它们涉及验证功能行为：参数如何影响返回的结果。对于React组件，这转化为设置props并验证渲染的DOM。还需要通过编程触发来修改UI的用户交互（单击，鼠标等）。

增强测试的可读性：安排效果模式

清晰，可读的测试至关重要。这是通过简洁的措辞和一致的结构来实现的。安排效果 - 批准（AAA）模式是理想的：

1. 安排：准备组件道具。
2. ACT：渲染组件并触发用户交互。
3. 断言：基于组件的标记验证预期结果。

例子：

它（“应该单击一个大按钮”，（）=> {
  // 安排
  props.size =“大”;

  // 行为
  const组件=安装（send）;
  仿真（组件，{type：“ click”}）;

  //断言
  期望（组件，“要载”，“单击”）;
}）;

对于更简单的测试，可以组合阶段：

它（“应该用自定义文本渲染”，（）=> {
  期望（发​​送，“安装”，“要具有文本”，“ send”）;
}）;

改善当前测试实践

以前的示例虽然从概念上讲是听起来，但使用标准工具不容易实现。考虑这种更常见的方法：

 （“应显示技术视图”，（）=> {
  const容器= document.createelement（“ div”）;
  document.body.body.appendchild（容器）;

  act（（）=> {
    Reactdom.render（<profilecard></profilecard> ， 容器）;
  }）;

  const button = container.queryselector（“ button”）;

  act（（）=> {
    button.dispatchevent（new window.mouseevent（“ click”，{bubbles：true}））;
  }）;

  const详细信息= container.queryselector（“。详细信息”）;

  期待（lidess.classlist.contains（“ Technologies”））。tobe（true）;
}）;

将此与更抽象的版本进行比较：

 （“应显示技术视图”，（）=> {
  const组件=安装（<profilecard></profilecard> ）；

  仿真（组件，{type：“ click”，target：“ button”}）;

  期望（组件，“查询测试ID”，“详细信息”，“将类”，“ Technologies”）;
}）;

这更干净，更可读。意外J可以实现这种抽象水平。

用意外J进行测试

意外J是与各种测试框架兼容的可扩展断言库。其插件系统和语法简化了React组件测试。我们将重点介绍用法和示例，而不是深入研究Intirantjs的内部工作。

示例：配置卡组件

我们将测试一个ProfileCard组件（省略了简短的代码，但在引用的GitHub存储库中可用）。

设置项目

要遵循，请克隆GITHUB存储库，然后按照说明设置项目并运行测试。

组件测试

测试（在src/components/ProfileCard/ProfileCard.test.js中）使用AAA模式：

1. ProP设置：设置beforeEach设置默认道具。

 each（（）=> {
  props = {
    数据： {
      名称：“贾斯汀案”，
      帖子：45，
      CreationDate：“ 01.01.2021”，
    }，，
  };
}）;

2. 特定的测试用例：示例包括“在线”图标，生物文本，技术视图（有和没有数据）的测试，位置显示，回调功能执行以及使用默认道具进行渲染。每个测试案例清楚地证明了安排 - 分配模式。 （省略了详细的测试案例，但可在GitHub储备库中使用）。

3. 运行测试：所有测试均通过yarn test执行。

结论

此示例展示了一种更有效的反应组件测试方法。通过将组件视为功能并采用AAA模式，您可以创建更可维护和可读的测试。测试库的选择应以其有效处理组件渲染和DOM比较的能力来指导；在这方面，意外J是强大的竞争者。探索提供的GitHub存储库，以进行完整的理解和进一步的实验。

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