title: React ui-router test state change
body: <p>I need to write a test using Jest and enzyme that covers the basic implementation of react/ui-router in my application. All it needs to do is assert that a component is loaded in the DOM after a programatic state transition occurs. </p>
  
  <p>I've been digging around in the docs and here on SO but can't find a way to accomplish this. </p>
  
  <p>I have a simple state setup for a Home component</p>
  
  <pre><code>export const states = [
    { 
    url: '/home',
    name: 'home',
    component: Home,
    }
  ];
  </code></pre>
  
  <p>This is the test that I'm trying to accomplish:</p>
  
  <pre><code>import React from 'react';
  import { Transition } from '@uirouter/react';
  import { mount } from 'enzyme';
  import { Home, Page } from './components/Layout';
  
  describe('UIRouter', () =&gt; {
    it('go to home state', () =&gt; {
      Transition.router.stateService.go('home');
  
          const wrapper = mount(
             &lt;UIRouter router={router} &gt;
               &lt;Page /&gt; //component that contains &lt;UIView /&gt;
             &lt;/UIRouter&gt;\
           );
      expect(wrapper.find(&lt;Home /&gt;).length).toBe(1);
    });
  });
  </code></pre>
  
  <p>When I try this code, I get the error:</p>
  
  <pre><code>TypeError: Cannot read property 'stateService' of undefined
  </code></pre>
  
  <p>package.json:</p>
  
  <pre><code>@uirouter/react": "^0.8.0",
  "react": "^16.3.2",
  "react-dom": "^16.3.2",
  "react-scripts": "1.1.4"
  "enzyme": "^3.3.0",
  </code></pre>
  
  <p>Any insight is appreciated!</p>