javascript - Mocha + React v.15.5.0 TypeError: Cannot read property 'route' of undefined -
i setting out set tests since updating react v15.5.0 believe have done lot bring of testing in-house were. don't need many external sources.
however, can't seem simple test working.
index.spec.js
/* eslint-disable object-property-newline */ import react 'react'; import reacttestutils 'react-dom/test-utils' // es6 import {expect} 'chai'; import splash '../../../src/components/splash'; import * styles '../../../src/components/splash/style.css'; describe('<splash />', () => { it('must 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); }) }); mocha helpers
// 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 'react'; import { navlink } 'react-router-dom' import logo '../shared/logo/index'; import * styles './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; terminal
> babel_env=test nyc mocha --reporter tap 'test/**/*.spec.js' warning: accessing proptypes via main react package deprecated. use prop-types package npm instead. 1..2 ok 1 splash must defined not ok 2 splash should have kindred logo typeerror: cannot call class function @ _classcallcheck (/var/www/kindred.com/src/components/splash/index.js:1:10298) @ splash (/var/www/kindred.com/src/components/splash/index.js:1:10514) i believe missing fundimental part of testing app. believed load react jsdom means don't need browser, loads up. rather mounting single component trying run including router
i shall read more then.
when unit test component renders route/link/navlink, need wrap in router. see example api docs:
// broken test('it expands when button clicked', () => { render( <sidebar/> ) click(thebutton) expect(thethingtobeopen) }) // fixed! test('it expands when button clicked', () => { render( <memoryrouter> <sidebar/> </memoryrouter> ) click(thebutton) expect(thethingtobeopen) }) as far checking specific class (as mentioned in comment above), should use hasclass method.
Comments
Post a Comment