2017-05-09 40 views
1

我想測試一個反應組件,但不知何故我無法獲得模擬功能來觸發點擊,因此我無法測試狀態變量或檢查點擊處理程序的函數調用。沒有得到模擬事件工作觸發點擊

下面是部分代碼: -

import React, { Component } from 'react'; 
    import { Navbar,Nav,NavItem,NavDropdown,MenuItem,Panel } from 'react- 
    bootstrap'; 
    import PropTypes from 'prop-types'; 

    class Header extends Component { 
    constructor() { 
    super(); 
    this.state = { 
    isLogOut : false 
    }; 
    this.handleLogOut=this.handleLogOut.bind(this); 

    } 
    handleLogOut(){ 
    this.setState({isLogOut:true}); 
    } 
    render() { 
    return (
     <Navbar> 
     <div className="network-nav-bar"> 
      <div className="network-nav-bar-items"> 
       <ul className="nav nav-tabs"> 
        <li><a href="#">Network Opimization</a></li> 
        <li><a href="#">Quick links</a></li> 
        <li><a href="#">What If?</a></li> 
       </ul> 
      </div> 
     </div> 
     <div className="col-xs-6"> 
     <Navbar.Header> 
      <Navbar.Brand> 
      <a href="#" className="ancIndiLogo">INDi</a> 
      </Navbar.Brand> 
     </Navbar.Header> 
     </div> 
     <div className="col-xs-6 noPadding"> 
     <Nav className="pull-right"> 
     <NavDropdown eventKey={3} title="Felicia Johnson" id="basic-nav- 
    dropdown"> 
      <MenuItem eventKey={3.1} onClick= 
    {this.handleLogOut}>LogOut</MenuItem> 
      </NavDropdown> 
     </Nav> 
     <i className="glyphicon glyphicon-search pull-right"></i> 
     </div> 

</Navbar> 
    ); 
    } 
} 

export default Header; 

,這裏是規範文件: -

'use strict'; 
    import React from 'react'; 
    import Header from '../modules/common/header'; 
    import {mount} from 'enzyme'; 
    describe('Testing the Header when',() => { 
    it('the it should have text-center class',() => { 
    const header = mount(
    <Header/> 
    ); 
    expect(header.find('i .glyphicon-search').length).toBe(1); 
    expect(header.find('a').length).toBe(6); 
    console.log(header.state()); 
    console.log(header.find('a').get(5)).simulate('click'); 
     console.log(header.state());  
    expect(header.state().isLogOut).to.equal(true); 

}); 

}); 

這裏是的package.json依賴文件: - 「酶」:「^ 2.8.2" 。

不知道究竟是什麼問題在這裏..應該是一個簡單的測試。

回答

0

您正在調用模擬控制檯日誌的輸出。

您的代碼: console.log(header.find('a').get(5)).simulate('click');

應該是: header.find('a').get(5).simulate('click');

+0

我已經做到了前...但只看到輸出我已經包裹在console.log..problem是我得到模擬是不是一個函數..只是想確認..我需要導入模擬,就像我爲mount..from酶......在文檔..沒有這樣的提到。 – Ayan

+0

我已經修復了..通過爲該標籤賦予一個Id ..然後模擬點擊它..我有六個錨標記,因爲我有一個檢查來證實這一點..我認爲這是酶的問題..因爲get函數返回節點..但是,當你打電話模擬它時莫名其妙.. – Ayan