2016-10-20 3 views
0

私が反応するために、次のテストファイルを持っている:私はこのテストを実行するとレンダリングテストの反応コンポーネントが失敗するのはなぜですか?

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> 
    ); 
    } 
} 

、第二の試験は、このエラーで失敗します:

ここ

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ファイルの一部であります

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()jestには、.toプロパティ/マッチャが含まれていません。

あなたが指摘して彼らの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

おかげで読むことができるよう、チュートリアルがmochachaiを使用していることをexpect(...).to.have

を行っているときにundefinedを得ている理由です。単に 'npm install chai'を使って私の問題を解決し、それを必要としました。 –

+0

あなたは大歓迎です! – QoP

関連する問題