.filterWhere(predicate)
返回满足断言函数的节点。
举个例子:
// 待测试组件
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
render() {
return (
<>
<h1 className='helloClass'>hello</h1>
<h1 id="worldID">World</h1>
<span className="spanClass">ya</span>
<span>haha</span>
<span fo="heheKey">hehe</span>
<MyCom />
</>
)
}
}
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').filterWhere(n => n.text() === 'hello').text()).toBe('hello');
const wrapper = app.find('span').filterWhere(n => n.text().indexOf('h') > -1);
expect(wrapper.at(0).text()).toBe('haha');
expect(wrapper.at(1).text()).toBe('hehe');
})
})
// 测试通过
.contains(nodeOrNodes)
返回布尔值,表示给定的节点(nodeOrNodes)是否存在于渲染树中。可以检测props以及相应的值。也就是说,如果预期元素与包装器的元素有相同的props并且共享相同的值就返回true。
举个例子:
// 待测试组件
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.contains(<h1>hello</h1>)).toEqual(false);
expect(app.contains(<h1 className={'a'}>hello</h1>)).toEqual(false);
expect(app.contains(<h1 className={'helloClass'}>Hello</h1>)).toEqual(false);
expect(app.contains(<h1 className={'helloClass'}>hello</h1>)).toEqual(true);
expect(app.contains(<h1 className='helloClass'>hello</h1>)).toEqual(true);
expect(app.contains([
<h1 id="worldID">World</h1>,
<span className="spanClass">ya</span>
])).toEqual(true)
expect(app.contains([
<h1 id="worldID">World</h1>,
<span>haha</span>
])).toEqual(false)
})
})
总结:严格匹配,不能差一丝一毫,多个节点必须相邻,否则不成功。
.containsMatchingElement(node)
返回浅渲染树中是否存在给定node节点的布尔值。
举个例子:
// 待测试组件
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
render() {
return (
<div>
<h1 className='helloClass' data-fo="foo">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.containsMatchingElement(<h1>hello</h1>)).toEqual(true);
expect(app.containsMatchingElement(<h1 className='helloClass' >hello</h1>)).toEqual(true);
expect(app.containsMatchingElement(<h1 data-fo='foo'>hello</h1>)).toEqual(true);
expect(app.containsMatchingElement(<h1 data-fo='foo-data'>hello</h1>)).toEqual(false);
expect(app.containsMatchingElement(<h1 data-fo='foo' />)).toEqual(false);
})
})
总结下来就是:可少不可多。props和值完全对用即可,不像contains那样严格。
.containsAllMatchingElements(nodes)
给定所有元素是否都存在于浅渲染树中。遵循containsMatchingElement匹配原则。
举个例子:
// 待测试组件
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.containsAllMatchingElements([
<h1>hello</h1>,
<h1 id="worldID">World</h1>
])).toEqual(true);
expect(app.containsAllMatchingElements([
<h1 className='helloClass'>hello</h1>,
<h1 id="worldID">World</h1>
])).toEqual(true);
expect(app.containsAllMatchingElements([
<h1 className='helloClass'>hello</h1>,
<span>haha</span>
])).toEqual(true);
})
})
// 测试通过
.containsAnyMatchingElements(nodes)
给定节点(nodes)中有一个匹配就返回true。
举个例子:
// 待测试组件
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.containsAnyMatchingElements([
<h1>hello</h1>,
<h1 id="worldIDDDD">World</h1>
])).toEqual(true);
expect(app.containsAnyMatchingElements([
<h1 className='helloClass'>hello</h1>,
<h1 id="worldIDDDD">World</h1>
])).toEqual(true);
expect(app.containsAnyMatchingElements([
<h1 className='helloClass'>hello</h1>,
<span>haha</span>
])).toEqual(true);
expect(app.containsAnyMatchingElements([
<h1 className='helloClass'>hello</h1>,
<span className='span'>haha</span>
])).toEqual(true);
})
})
contains总结:匹配规则越来越简单。
.equals(node)
返回布尔值:表示当前渲染树的根节点是否和传入的相同,忽略未定义的属性。
举个例子:
// 待测试组件
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.equals(<div><h1 className='helloClass'>hello</h1></div>)).toEqual(true)
expect(app.equals(<div><h1>hello</h1></div>)).toEqual(false)
expect(app.equals(<h1 className='helloClass'>hello</h1>)).toEqual(false)
expect(app.equals(<div></div>)).toEqual(false)
})
})
注意:当组件中注释部分解注释的时候测试不通过。
本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理