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

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

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

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

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

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

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

要测试这些道具,我们可以使用酶的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