Mocha + React v.15.5.0 TypeError：未定義のプロパティ 'route'を読み取ることができません

Question

私はちょうど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' 
}; 

スプラッシュ/ 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) 

私はテストアプリのfundimental一部が欠落しています信じています。私はロードロードがjsdomに反応すると信じていました。つまり、ブラウザが必要ないということです。しかし、はっきりいうだけで、この単一部品を実装するよりも、それは含めてすべてを実行しようとしている私の私は、より多くの本にまで読まなければならrouter

。あなたはユニットルート/リンク/ NavLinkをレンダリングするコンポーネントをテスト

Answer 1

、あなたはルータでそれをラップする必要があります。 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メソッドを使用する必要があります。