我所理解Enzyme的作用就是将要测试的组件进行渲染，使用户可以在测试环境中对UI渲染情况、DOM事件等进行测试。
常用API
.at(index)
可以理解为根据索引返回节点，嵌套的也在内。
举个例子：
// 待测试组件
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1>hello</h1>
<h1>World</h1>
</div>
)
}
}
export default App;
// 测试代码
import React from 'react';
import App from '../src/App';
import { shallow } from 'enzyme'
describe('component APP test', () => {
it('测试hello world', () => {
const app = shallow(<App />);
console.log(app.find('h1').at(0))
console.log(app.find('h1').at(1))
expect(app.find('h1').at(0).text()).toBe('hello')
expect(app.find('h1').at(1).text()).toBe('World')
})
})
返回值：
再举个例子：
// 待测试组件
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1>hello</h1>
<h1>World</h1>
// ********change start******
<div>
<h1>!!</h1>
</div>
// ********change end******
</div>
)
}
}
export default App;
// 测试代码
import React from 'react';
import App from '../src/App';
import { shallow } from 'enzyme'
describe('component APP test', () => {
it('测试hello world', () => {
const app = shallow(<App />);
expect(app.find('h1').at(0).text()).toBe('hello')
expect(app.find('h1').at(1).text()).toBe('World')
// **********change start*********
expect(app.find('h1').at(2).text()).toBe('.')
// **********change end*********
})
})
测试结果：
.childAt(index)
返回具有指定索引的子元素到新的wrapper。
举个例子：
// 待测试的组件
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1>hello</h1>
<h1>World</h1>
</div>
)
}
}
export default App;
// 测试代码
import React from 'react';
import App from '../src/App';
import { shallow } from 'enzyme'
describe('component APP test', () => {
it('测试hello world', () => {
const app = shallow(<App />);
// 注意是查找的div 不是h1
expect(app.find('div').childAt(0).text()).toBe('hello')
expect(app.find('div').childAt(1).text()).toBe('World')
})
})
测试结果：
再举个例子：
测试代码不变，将待测试组件变成如下结构：
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1>hello</h1>
<h1>World</h1>
// change start------------
<div>
<h1>!!</h1>
</div>
// change end--------------
</div>
)
}
}
export default App;
测试结果：
总结：要根据独一无二的条件(比如只有一个div)进行find的结果才可使用childAt。
.find(selector)
根据选择器，找到渲染树中的节点。
selector 参数：
·标签：find('tag')
·类名：find('.className')
·id：.find('#id')
·组合：.find('tag.className')
·构造函数：.find(Foo)
·组件显示名字：.find('Foo')
·对象属性选择器：.find({ prop: 'value' })
举一堆例子：
// MyCom组件
import React, { Component } from 'react';
class MyCom extends Component {
render() {
return (
<h1>xixi</h1>
)
}
}
export default MyCom;
// 待测试组件
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
render() {
return (
<div>
<h1 className='helloClass'>hello</h1>
<h1 id="worldID">World</h1>
<span className="spanClass">ya</span>
<span>haha</span>
<span fo="heheKey">hehe</span>
<MyCom />
</div>
)
}
}
export default App;
// 测试代码
import React from 'react';
import App from '../src/App';
import MyCom from '../src/MyCom';
import { shallow } from 'enzyme'
describe('component APP test', () => {
it('测试hello world', () => {
const app = shallow(<App />);
expect(app.find('span').at(1).text()).toBe('haha')
expect(app.find('.helloClass').text()).toBe('hello')
expect(app.find('#worldID').text()).toBe('World')
expect(app.find('span.spanClass').text()).toBe('ya')
expect(app.find('MyCom').text()).toBe('<MyCom />') // 不能匹配到xixi,子组件不渲染
expect(app.find(MyCom).text()).toBe('<MyCom />')
expect(app.find({ fo: 'heheKey' }).text()).toBe('hehe')
})
})
findWhere(predicate)
找到渲染树中里被的断言函数（predicate）返回true的节点。断言函数返回不布尔值。
举个例子：
// 待测试组件
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
render() {
return (
<div>
<h1 className='helloClass'>hello</h1>
<h1 className='helloClass1'>helloyaya</h1>
<h1 id="worldID">World</h1>
<span className="spanClass">ya</span>
<span>haha</span>
<span fo="heheKey">hehe</span>
<MyCom />
</div>
)
}
}
export default App;
// 测试代码
import React from 'react';
import App from '../src/App';
import MyCom from '../src/MyCom';
import { shallow } from 'enzyme'
describe('component APP test', () => {
it('测试hello world', () => {
const app = shallow(<App />);
const wrapper = app.findWhere(n => n.text().indexOf('hello') > -1);
expect(wrapper.find('.helloClass').text()).toBe('hello')
expect(wrapper.find('.helloClass1').text()).toBe('helloyaya')
})
})
// 测试通过！！！
我所理解的这个api类似于数组中的filter，满足条件的节点被过滤出来，组成到新的Wrapper中被返回。在返回的Wrapper中我们可以再进行find操作。
.filter(selector)
将与提供的选择器匹配的节点包装成wrapper返回。
举个例子：
// 待测试的组件
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
render() {
return (
<div>
<h1 className='helloClass'>hello</h1>
<h1 id="worldID">World</h1>
<span className="spanClass">ya</span>
<span>haha</span>
<span fo="heheKey">hehe</span>
<MyCom />
</div>
)
}
}
export default App;
// 测试代码
import React from 'react';
import App from '../src/App';
import { shallow } from 'enzyme'
describe('component APP test', () => {
it('测试hello world', () => {
const app = shallow(<App />);
expect(app.find('h1').filter('.helloClass').text()).toBe('hello');
expect(app.find('h1').filter('#worldID').text()).toBe('World');
})
})
// 测试通过
总结：从已经查找的节点中过滤出满足条件的节点。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
