Friday, 7 April 2017

Mocha + React v.15.5.0 TypeError: Cannot read property 'route' of undefined

I am just setting out to set up my tests since updating to react v15.5.0 I believe that they have done a lot to bring all of the testing in-house as it were. So you don't need as many external sources.

however, i just can't seem to get a very simple test working.

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';

//Logo Details
import Logo from '../../../src/components/shared/logo'
import logo from '../../../src/components/shared/logo/_Logo.css';
import * as font from '../../../src/components/shared/font/fontello.css';

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

  it('should have kindred logo', () => {
    const SplashRendered = ReactTestUtils.renderIntoDocument(<Splash/>);
    const RenderedLogo = ReactTestUtils.findRenderedDOMComponentWithClass(SplashRendered, '.logo')
    expect(RenderedLogo.className).to.equal(logo.logo +' '+font['icon-logo']); //fails
  })
});

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 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;

Terminal

> 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)

I believe I am missing a fundimental part of testing app. I believed we love react up into jsdom which means we don't need a browser, it then loads up. But clearly rather than just mounting this single component it is trying to run everything including my router



via Jamie Hutber