Javascript 酶可以'；找不到要使用mount单击的元素

我有一个tab-React成分，我正在用酶和Jest测试它

以下是组件：

class TabbedArea extends React.Component{


  constructor(props) {
    super(props)

    this.handleClick = this.handleClick.bind(this);
    this.state = {
      activeIndex: this.props.activeIndex || 0
    };
  }

  componentWillReceiveProps(nextProps){
    if (this.state.activeIndex !== nextProps.activeIndex) {
      this.setState({
        activeIndex: nextProps.activeIndex
      });
    }
  }

  handleClick(index, e) {
    e.preventDefault();
    this.setState({
      activeIndex: index
    });
  }

  tabNodes() {
    return (_.map(this.props.children, (child, index) => {
        let className = classNames({'active': this.state.activeIndex === index});
          return (
            <li key={index} onClick={(e) => this.handleClick(index, e)}>
              <a className={className} href="#">{child.props.display}</a>
            </li>
          )
        }
      )
    )
  }

  contentNodes() {
    return (
      _.map(this.props.children, (child, index) => {
        if(this.state.activeIndex === index) {
          return (
            <div className="TabPane" key={index}>
              {child.props.children}
            </div>
          )
        }
      }
      )
    )
  }

  render() {

    return (
      <div className={`${styles.ParcelResultsTrackingHistory} col-md-12`}>
        <ul className="nav nav-tabs" id="navTabs">
          {this.tabNodes()}
        </ul>
        <section>
          {this.contentNodes()}
        </section>
      </div>
    );
  }

}

export default TabbedArea;

类选项卡区域扩展了React.Component{
建造师（道具）{
超级（道具）
this.handleClick=this.handleClick.bind（this）；
此.state={
activeIndex:this.props.activeIndex | | 0
};
}
组件将接收道具（下一步）{
if（this.state.activeIndex！==nextrops.activeIndex）{
这是我的国家({
activeIndex:nextrops.activeIndex
});
}
}
handleClick（索引，e）{
e、 预防默认值（）；
这是我的国家({
活动索引：索引
});
}
tabNodes（）{
return（u.map（this.props.children，（child，index）=>{
让className=classNames（{'active'：this.state.activeIndex===index}）；
返回(
this.handleClick（index，e）}>

)
}
)
)
}
contentNodes（）{
返回(
_.map（this.props.children，（child，index）=>{
if（this.state.activeIndex==索引）{
返回(
{child.props.children}
)
}
}
)
)
}
render（）{
返回(

{this.tabNodes（）}

{this.contentNodes（）}
);
}
}
导出默认选项卡区域；

这是我的测试：

describe('Given the Tabbed Area component is rendered', () => {


  describe('Initial Snapshots', () => {
    let component
    beforeEach(() => {
      component = shallow(<TabbedArea />)
    })
    it('should be as expected', () => {
      expect(shallowToJson(component)).toMatchSnapshot()
    })
  })

  describe('I click on the second tab', () => {
    let component
    let tab2

    component = shallow(<TabbedArea/>)
    tab2 = component.find('ul li').at(1);
    tab2.simulate('click');

    describe('the content of the second tab is rendered', () => {
      component.update();

      it('should match the snapshot', () => {
        expect(shallowToJson(component)).toMatchSnapshot()
      });

    });

  });

  describe('Clicking on the tab', () => {
    const wrapper = mount(<TabbedArea/>)
    const handleClick = jest.spyOn(wrapper.instance(), 'handleClick');
    wrapper.update();
    const tab = wrapper.find('ul#navTabs li').first()
    tab.simulate('click')

    it('will call handleClick', () => {
      expect(handleClick).toBeCalled();
    });
  });

})

descripe（'给定呈现的选项卡式区域组件'，（）=>{
描述（'初始快照'，（）=>{
let组件
在每个之前（（）=>{
组件=浅（）
})
它（'应该如预期的那样'，（）=>{
expect（shallowToJson（component））.toMatchSnapshot（）
})
})
描述（'我点击第二个标签'，（）=>{
let组件
让tab2
组件=浅（）
tab2=组件查找（'ul li'）。位于（1）；
表2.模拟（“点击”）；
description（'呈现第二个选项卡的内容'，（）=>{
component.update（）；
它（'应该匹配快照'，（）=>{
expect（shallowToJson（component））.toMatchSnapshot（）
});
});
});
描述（'单击选项卡'，（）=>{
const wrapper=mount（）
const handleClick=jest.spyOn（wrapper.instance（），'handleClick'）；
wrapper.update（）；
const tab=wrapper.find（'ul#navTabs li'）.first（）
tab.simulate（'单击'）
它（'将调用handleClick'，（）=>{
expect（handleClick）.toBeCalled（）；
});
});
})

快照测试运行正常，但当我尝试测试

handleClick

时，它失败了：

方法“simulate”仅用于在单个节点上运行。找到0。

知道为什么找不到节点吗？我尝试按id查找

li

，但得到了相同的错误

---

谢谢

不是吗，因为您正在渲染没有子对象的

tabNodes

method在

this.props.children

测试中哪个是空的。

哪个测试失败？它在

Descripte（'单击选项卡'）…