React技巧—用Jest +酶测试React组件

在我的上一篇文章中，我写了关于使用Jest和Enzyme测试react组件的介绍。在这篇文章中，我将发展最后一个项目，以引入更多测试来检查道具和功能/事件。

React技巧—使用Jest + Enzyme（基本）测试React组件
这篇文章面向从未测试过应用程序或经验不足的人。 medium.com

我假设您已经克隆了我们在上一篇文章中开始的项目。现在，让我们对其进行一些更改，添加一个名为BasicInput的新组件：

这是一个非常简单的功能组件，可以接收一些道具以呈现输入的html对象。

现在让我们对其进行测试，以创建一个名为basic-input.test.js的新测试文件：

基本上，我已经导入了酶和组件。之后，我选择测试两个非常基本的东西：测试组件是否渲染而不会崩溃以及两个道具： placeholder和type 。

要测试这些道具，我们可以使用酶的prop方法，这非常简单：

  const placeholder_text ='在此处输入任何内容';

  const包装=浅（）;

 期望（包装。 道具 （'占位符'））。等于（占位符文本）;

现在，让我们回到主要组件App并将其更改为使用此新组件：

 从'react'导入React，{组件}; 
 从'./logo.svg'导入徽标； 
 导入'./App.css';

 从'./components/basic-input'导入BasicInput;

  App类扩展了组件{ 
  constructor（）{ 
  超（）; 
  this.state = { 
  basicValue：” 
  }; 

  this.handleBasicInputChanges = this.handleBasicInputChanges.bind（this）; 
  }

  handleBasicInputChanges（e）{ 
  this.setState（{ 
  basicValue：e.target.value 
  }）; 
  }

  render（）{ 
 返回（ 
   
   
   
  欢迎使用React基本测试
 
  
 
   
  <BasicInput 
  type =“ text” 
  placeholder =“输入一些内容” 
  handleChanges = {this.handleBasicInputChanges} 
  /> 
  
 
  
 
  ）; 
  } 
  }

 导出默认应用程序；

基本上，我已经创建了一个构造函数和方法来处理输入更改。我添加了组件BasicInput并传递了一些道具。它看起来应该像这样：

好的，现在让我们更改现有的App.test.js，使其包含输入更改的测试。

在这一部分中，我必须包括一个名为mount的新函数。如您所见，此处的目标是测试BasicInput输入的更改是否会修改状态。

如果要完整渲染（包括子组件和对DOM的访问），请 始终使用 mount 。

handleBasicInputChanges传递给handleChanges道具

 它（“更改输入值后应更改状态”，（）=> { 
  const newValue ='测试组件'; 
  const wrapper = mount（）; 
  const input = wrapper.find（'input'）; 

 输入。  模拟 （'change'，{target：{value：newValue}}）; 
  Expect（wrapper.state（）。basicValue）.toEqual（newValue）; 
  }）;

我们唯一需要做的就是替换App组件并找到我们想要模拟事件的组件，在这种情况下，它将作为输入。之后，我们只需验证状态是否已更改。

您可以阅读酶文档以获取有关api及其使用方式的更多详细信息。

您可以在我的GitHub上克隆此项目：https://github.com/lblima/react-basic-tests-with-jest-enzyme

那是所有人

谢谢阅读！

airbnb /酶
酶–用于React github.com的JavaScript测试实用程序 API参考·酶
编辑描述 airbnb.io 酵素| Airbnb工程
编辑描述 airbnb.io lblima /含笑话酶的基本反应测试
通过在GitHub上创建一个帐户，为用笑话酶进行“基本测试”做出贡献。 github.com

React技巧—用Jest +酶测试React组件—第2部分