2016-10-20 100 views
0

我爲下面的測試文件反應:爲什麼這會導致渲染測試失敗?

1 import React from 'react'; 
    2 import ReactDOM from 'react-dom'; 
    3 import { shallow, mount } from 'enzyme'; 
    4 import { LinkContainer } from 'react-router-bootstrap'; 
    5 import { App } from './App'; 
    6 
    7 it('renders without crashing',() => { 
    8 const div = document.createElement('div'); 
    9 ReactDOM.render(<App />, div); 
10 }); 
11 
12 it('renders 4 <LinkContainer />',() => { 
13 const appWrapper = mount(<App />); 
14 expect(appWrapper.find(LinkContainer)).to.have.length(4) 
15 }); 

這是我的App.js文件的一部分:具有此錯誤

import React, { Component } from 'react'; 
import { Image, Grid, Media, Navbar, NavItem, Nav, Jumbotron } from 'react-bootstrap'; 
import { Link } from 'react-router'; 
import { LinkContainer } from 'react-router-bootstrap'; 

class App extends Component { 


render() { 
    return (
     <div> 
     <Navbar fixedTop inverse> 
      <Grid> 
      <Navbar.Header> 
       <Navbar.Brand> 
       <Link to="/">Daniel Rubio</Link> 
       </Navbar.Brand> 
      </Navbar.Header> 
      <Nav pullRight> 
       <LinkContainer to="/about"> 
       <NavItem>About</NavItem> 
       </LinkContainer> 
       <LinkContainer to="/education"> 
       <NavItem>Education</NavItem> 
       </LinkContainer> 
       <LinkContainer to="/experience"> 
       <NavItem>Experience</NavItem> 
       </LinkContainer> 
       <LinkContainer to="/skills"> 
       <NavItem>Skills</NavItem> 
       </LinkContainer> 
      </Nav> 
      </Grid> 
     </Navbar> 
     <div className="contents"> 
      { this.props.children } 
     </div> 
     <Navbar fixedBottom inverse> 
      <Navbar.Header> 
      <Navbar.Brand> 
       <p>Made with React and with EMCAScript6</p> 
      </Navbar.Brand> 
      </Navbar.Header> 
     </Navbar> 
     </div> 
    ); 
    } 
} 

當運行該測試中,所述第二測試失敗:

FAIL src/App.test.js 


✓ renders without crashing (24ms) 
    ✕ renders 4 <LinkContainer /> (21ms) 

    ● renders 4 <LinkContainer /> 

    TypeError: Cannot read property 'have' of undefined 

     at Object.<anonymous> (src/App.test.js:14:93) 
     at process._tickCallback (internal/process/next_tick.js:103:7) 

Test Summary 
› Ran all tests related to changed files. 
› 1 test failed, 1 test passed (2 total in 1 test suite, run time 0.476s) 

我沿着Jest教程和Enzyme這裏找到的教程Enzyme。我基本上做的就是複製酶如何覆蓋測試。但是,它看起來像反應無法找到我的<LinkContainer />組件。我已經從相應的軟件包中得到它,所以它應該是正確的?幫助將不勝感激。

回答

1

expect() from jest不包括任何.to屬性/匹配器。

這就是爲什麼你得到undefined當你該教程使用mochachaiexpect(...).to.have

,你可以自己github page

The documentation and examples for enzyme use mocha and chai, but you should be able to extrapolate to your framework of choice.

+0

感謝您指出讀的原因。只需使用'npm install chai'解決了我的問題,然後需要它。 –

+0

歡迎您! – QoP