How to mock react-router context

Question

I've got fairly simple react component (Link wrapper which adds 'active' class if route is active):

import React, { PropTypes } from 'react'; import { Link } from 'react-router';  const NavLink = (props, context) => {   const isActive = context.router.isActive(props.to, true);   const activeClass = isActive ? 'active' : '';    return (     <li className={activeClass}>       <Link {...props}>{props.children}</Link>     </li>   ); }  NavLink.contextTypes = {   router: PropTypes.object, };  NavLink.propTypes = {   children: PropTypes.node,   to: PropTypes.string, };  export default NavLink; 

How am I supposed to test it? My only attempt was:

import NavLink from '../index';  import expect from 'expect'; import { mount } from 'enzyme'; import React from 'react';  describe('<NavLink />', () => {   it('should add active class', () => {     const renderedComponent = mount(<NavLink to="/home" />, { router: { pathname: '/home' } });     expect(renderedComponent.hasClass('active')).toEqual(true);   }); }); 

It doesn't work and returns TypeError: Cannot read property 'isActive' of undefined. It definitely needs some router mocking, but I have no idea how to write it.

Answer 1

Thanks @Elon Szopos for your answer but I manage to write something much more simple (following https://github.com/airbnb/enzyme/pull/62):

import NavLink from '../index';  import expect from 'expect'; import { shallow } from 'enzyme'; import React from 'react';  describe('<NavLink />', () => {   it('should add active class', () => {     const context = { router: { isActive: (a, b) => true } };     const renderedComponent = shallow(<NavLink to="/home" />, { context });     expect(renderedComponent.hasClass('active')).toEqual(true);   }); }); 

I have to change mount to shallow in order not to evaluate Link which gives me an error connected with the react-router TypeError: router.createHref is not a function.

I would rather have "real" react-router than just an object but I have no idea how to create it.