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

Popular posts from this blog

How to understand 2 main() functions after using uftrace to profile the C++ program? -

c# - Update a combobox from a presenter (MVP) -

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -