Enzyme： 测试React

---

对于新手来说，找到一个能上手的Enzyme测试React的教程不难，难的是应该怎么把 Enzyme提供的测试方法用起来。上手Enzyme的正确使用姿势应该是：
-围绕Enzyme画出自学提问图 >>
-熟悉 Enzyme提供的测试方法 + demo预研>>

Enzyme 是什么

*Enzyme自学提问图*

Enzyme 有哪些测试方法

以下面的Todo应用为例

*Todo应用小例子*

为上面的App组件设置3个测试点

• 测试标题是否为 Todos
• 测试Todo项的初始状态（"未完成"或"已完成"）
• 测试删除按钮是否管用

shadow()：当没有和DOM互动，不涉及子组件时（“表层感，一个字浅”）

describe('Enzyme Shadow',function () {  
  //测试组件标题是否为 Todos
  it('App/ ‘s title should be Todos',function(){    
    let app = render(<App/>);
    expect(app.find('h1').text()).to.equal('Todos');  
  });
});

其中穿插了Enzyme的find()方法：只支持简单选择器，稍微复杂的css都不支持
<pre>
类选择器：component.find(".player")
id选择器：component.find("#player")
标签选择器：component.find("h1")
component.find('div.custom-class'); // by compound selector
component.find(TableRow); // by constructor
component.find('TableRow'); // by display name</pre>

上述App的标题就符合该情况，只是测试组件的标题名。所以用shadow()非常适合

render():它跟shallow方法非常像，主要的不同是采用了第三方HTML解析库Cheerio，它返回的是一个Cheerio实例对象

describe('Enzyme Render', function () {  
  //测试Todo项的初始状态（"未完成"或"已完成"）
  it('Todo item should not have todo-done class', function () {   
   let app = render(<App/>); 
   expect(app.find('.todo-done').length).to.equal(0);
 });
});

mount():将React组件加载为真实的DOM。“找到DOM节点，操作它”（”实在感“）

describe('Enzyme Mount', function () {  
  //测试删除是否起作用 
  it('Delete button',function () {    
    let app = mount(<App/>);      
    let totalLength = app.find("li").length;
    app.find("button.delete").at(0).simulate('click');
    expect(app.find("li").length).to.equal(totalLength-1);  
  });
});

在这些测试方法中 穿插了常用的Enzyme的API方法
<pre>
.get(index)：返回指定位置的子组件的DOM节点
.at(index)：返回指定位置的子组件
.text()：返回当前组件的文本内容
.html()：返回当前组件的HTML代码形式
.props()：返回根组件的所有属性
.prop(key)：返回根组件的指定属性
.state([key])：返回根组件的状态</pre>
点击获取源代码资源

体会：
-遇到问题多用英语在stackflow网站上提问
-画好自学提问图，知其然需知其所以然
-还有新知识很可爱，迈出去需勇敢
-最终落实到亲自敲代码上，程序媛一天不敲代码难受

每天都努力一点
谢谢你看完

---