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 />
組件。我已經從相應的軟件包中得到它,所以它應該是正確的?幫助將不勝感激。
感謝您指出讀的原因。只需使用'npm install chai'解決了我的問題,然後需要它。 –
歡迎您! – QoP