摩卡+ React v.15.5.0 TypeError：無法讀取屬性'路由'的undefined

我剛剛開始設置我的測試，因爲更新到react v15.5.0我相信他們已經做了很多事情來把所有的測試in-house照原樣。所以你不需要那麼多的外部資源。摩卡+ React v.15.5.0 TypeError：無法讀取屬性'路由'的undefined

但是，我似乎無法得到一個非常簡單的測試工作。

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

我將更多的進入這個讀了那麼。

來源

2017-04-07 Jamie Hutber

所以我需要酶，然後不檢查的確切類，但如果它包含我需要的東西'它（「應有的className」，（）=> {xpect（wrapper.first（）。支撐（「類名」））to.contain（'indexAppContent'）;}）' –

當單元測試呈現路由/連接/ 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方法。

來源

2017-05-08 19:07:57

摩卡+ React v.15.5.0 TypeError：無法讀取屬性'路由'的undefined

回答

相關問題