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" 。
不知道究竟是什麼問題在這裏..應該是一個簡單的測試。
我已經做到了前...但只看到輸出我已經包裹在console.log..problem是我得到模擬是不是一個函數..只是想確認..我需要導入模擬,就像我爲mount..from酶......在文檔..沒有這樣的提到。 – Ayan
這是因爲你只有4個''標籤,你正在做'.get(5)' – patrick
我已經修復了..通過爲該標籤賦予一個Id ..然後模擬點擊它..我有六個錨標記,因爲我有一個檢查來證實這一點..我認爲這是酶的問題..因爲get函數返回節點..但是,當你打電話模擬它時莫名其妙.. – Ayan