Testing component that uses react-router props

react-router-component.js

/// Route

import React from 'react';
import { Router, Route } from 'react-router';

import Profile from './components/Profile';

const Routes = (props) => (
  <Router {...props}>
    <Route path="/profile/:username" component={Profile} />
  </Router>
);

export default Routes;

/// Component

import React, { Component } from 'react';

class Profile extends Component {

  render() {
    return(
      <div className={"profile"}>
        Profile for {this.props.params.username}
      </div>
    )
  }
}

export default Profile;

/// Test

import React from 'react';
import ReactDOM from 'react-dom';
import Profile from '../../../src/components/Profile';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Profile />, div);
});


/// Test output

 FAIL  test/components/Profile/Profile.test.js
  ● renders without crashing

    TypeError: Cannot read property 'username' of undefined

      at Profile.render (src/components/Profile/index.js:9:28)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:796:21
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
      at ReactCompositeComponent._renderValidatedComponentWithoutOwnerOrContext (node_modules/react-dom/lib/ReactCompositeComponent.js:795:25)
      at ReactCompositeComponent._renderValidatedComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:822:32)
      at ReactCompositeComponent.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:362:30)
      at ReactCompositeComponent.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.ReactReconciler.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponent.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponent.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.ReactReconciler.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at mountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:104:32)
      at ReactReconcileTransaction.TransactionImpl.perform (node_modules/react-dom/lib/Transaction.js:140:20)
      at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15)
      at ReactDefaultBatchingStrategyTransaction.TransactionImpl.perform (node_modules/react-dom/lib/Transaction.js:140:20)
      at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
      at Object.ReactMount._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:320:18)
      at Object.ReactMount._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
      at Object.ReactMount.render (node_modules/react-dom/lib/ReactMount.js:422:23)
      at Object.<anonymous> (test/components/Profile/Profile.test.js:7:48)
      at process._tickCallback (node.js:356:9)

Solution:

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import Profile from '../../../src/components/Profile';

it('renders without crashing', () => {
  let profile = TestUtils.renderIntoDocument(<Profile params={ {username: "Hank"} } />)
  expect(ReactDOM.findDOMNode(profile).textContent).toBe('Profile for Hank')
});