我很乐意在简单的待办事项列表中对组件进行单元测试。
这是组件:
import React, { Component } from 'react';
import Task from '../Task';
export default class TaskList extends Component {
render() {
let tasks = this.props.items.map((item,index)=> <Task key={index} item={item} />)
return (
<ul>{tasks}</ul>
)
}
这是测试:
import TaskList from './';
import Task from '../Task';
describe('<TaskList}/>', () => {
let wrapper;
beforeEach(()=>{
wrapper = shallow(<TaskList items={["item 1", "item 2"]} />);
})
it('should have 2 list items', () => {
expect(wrapper.find('ul')).to.have.length(1);
})
});
无论我作为“项目”的元素输入(这些是组件的支柱) - “ul”的数量仅仅是一个。
此测试有什么问题? 我怎样才能检查组件中有多少'ul'?
答案 0 :(得分:0)
为了查看有多少&#39; ul&#39;在组件中我们应该使用chai函数: .childern(),像这样:
it('should have 2 list items', () => {
expect(wrapper.find('ul').children()).to.have.length(2);
})