Mocha + React v.15.5.0 TypeError：无法读取未定义的属性“路线”答案

【问题标题】：Mocha + React v.15.5.0 TypeError: Cannot read property 'route' of undefinedMocha + React v.15.5.0 TypeError：无法读取未定义的属性“路线”
【发布时间】：2017-04-07 22:57:39
【问题描述】：

自从更新到react v15.5.0 后，我才开始设置我的测试，我相信他们已经做了很多工作来将所有测试都带到in-house。所以你不需要那么多的外部资源。

但是，我似乎无法进行非常简单的测试。

index.spec.js

/* eslint-disable object-property-newline */
import React from 'react';
import ReactTestUtils from 'react-dom/test-utils' // ES6
import {expect} from 'chai';
import Splash from '../../../src/components/Splash';
import * as styles from '../../../src/components/Splash/style.css';


describe('<Splash />', () => {
  it('must be defined', () => {
    expect(Splash).to.be.defined;
  })

  it('should have kindred logo', () => {
    const SplashRendered = ReactTestUtils.renderIntoDocument(<Splash/>);
    const RenderedSplash = ReactTestUtils.findRenderedDOMComponentWithClass(SplashRendered, styles.indexAppContent);
    expect(RenderedSplash.className).to.equal(styles.indexAppContent);
  })
});

摩卡助手

// jsdom
const exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js'
};

Splash/index.js

import React from 'react';
import { NavLink } from 'react-router-dom'
import Logo from '../shared/logo/index';
import * as styles from './style.css';

class Splash extends React.Component {
  render(){
    return (
      <div className={styles.indexAppContent}>
        <NavLink to="/home"  className={styles.index}>
          <Logo />
        </NavLink>
      </div>
    );
  }
}

export default Splash;

终端

> BABEL_ENV=test nyc mocha --reporter tap 'test/**/*.spec.js'

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
1..2
ok 1 Splash must be defined
not ok 2 Splash should have kindred logo
  TypeError: Cannot call a class as a function
      at _classCallCheck (/var/www/kindred.com/src/components/Splash/index.js:1:10298)
      at Splash (/var/www/kindred.com/src/components/Splash/index.js:1:10514)

我相信我缺少测试应用程序的基本部分。我相信我们将 react 加载到 jsdom 中，这意味着我们不需要浏览器，然后它就会加载。但很明显，它不仅仅是安装这个单个组件，它还试图运行包括我的 router 在内的所有内容

那我会详细阅读。

【问题讨论】：

所以我需要酶，然后不检查确切的类，但如果它包含我需要的内容 `it('should have className', () => { xpect(wrapper.first().prop ('className')) to.contain('indexAppContent'); })`

标签： javascript node.js reactjs testing mocha.js

【解决方案1】：

当您对呈现 Route/Link/NavLink 的组件进行单元测试时，您需要将其包装在路由器中。请参阅api docs 中的此示例：

// broken
test('it expands when the button is clicked', () => {
  render(
    <Sidebar/>
  )
  click(theButton)
  expect(theThingToBeOpen)
})

// fixed!
test('it expands when the button is clicked', () => {
  render(
    <MemoryRouter>
      <Sidebar/>
    </MemoryRouter>
  )
  click(theButton)
  expect(theThingToBeOpen)
})

至于检查特定类（如您在上面的评论中提到的），您应该使用hasClass 方法。

【讨论】：