Question

我有以下测试文件作为反应：

  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 />组件。我从相应的包装中要求它，所以它应该存在吗？帮助将不胜感激。

Answer 1

来自jest的

expect()不包含任何.to属性/匹配器。

这就是你在undefined

时获得expect(...).to.have的原因

该教程正在使用mocha和chai，因为您可以阅读github page

酶的文档和例子使用摩卡和柴，但是你应该能够推断出你选择的框架。

为什么这会使渲染测试中的组件失败？

1 个答案: