Dan Rubio Dan Rubio - 1 month ago 18
Javascript Question

Why does this react component from rendering test fail?

I have the following test file for react:

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


Here is a portion of my
App.js
file:

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


When I run this test, the second test fails with this error:

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)


I am following along the
Jest
tutorial and
Enzyme
tutorial found hereEnzyme . What I'm basically doing is pretyt much just copying how enzyme covers testing. However, it looks like react cannot find my
<LinkContainer />
component. I've required it from the appropriate package so it should be present right? Help would be appreciated.

QoP QoP
Answer

expect() from jest does not include any .to property/matcher.

That's the reason why you are getting undefined when you are doing expect(...).to.have

That tutorial is using mocha and chai as you can read in their github page

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

Comments