私が反応するために、次のテストファイルを持っている:私はこのテストを実行するとレンダリングテストの反応コンポーネントが失敗するのはなぜですか?
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 />
コンポーネントを見つけることができないようです。私は適切なパッケージからそれを必要としているので、正しく存在するはずですか?ヘルプをいただければ幸いです。
おかげで読むことができるよう、チュートリアルがmochaとchaiを使用していることを
expect(...).to.have
を行っているときに
undefined
を得ている理由です。単に 'npm install chai'を使って私の問題を解決し、それを必要としました。 –あなたは大歓迎です! – QoP