fix(useUiSref): Throw if 'to' isnt a string

Author: christopherthielen

src/components/UISref.tsx

@@ -8,12 +8,12 @@ import * as PropTypes from 'prop-types';
 
 import * as _classNames from 'classnames';
 
-import { isFunction, TransitionOptions } from '@uirouter/core';
+import { isFunction, isString, TransitionOptions } from '@uirouter/core';
 
-import { UIRouterReact, UIRouterContext, StateRegistry } from '../index';
+import { StateRegistry } from '../index';
 import { useUIRouter } from './hooks';
 import { UIViewAddress, UIViewContext } from './UIView';
-import { UISrefActiveContext, AddStateInfoFn } from './UISrefActive';
+import { UISrefActiveContext } from './UISrefActive';
 
 /** @hidden */
 let classNames = _classNames;
@@ -47,6 +47,9 @@ export function useUISref(to: string, params: { [key: string]: any } = {}, optio
   const parentUISrefActiveAddStateInfo = useContext(UISrefActiveContext);
 
   const { stateService, stateRegistry } = router;
+  if (!isString(to)) {
+    throw new Error(`State name provided to UISref (as 'to') must be a string.`);
+  }
 
   useEffect(() => parentUISrefActiveAddStateInfo(to, params), []);
 

src/components/UISrefActive.tsx

@@ -21,9 +21,6 @@ export interface UISrefActiveState {
 /** @hidden */
 export type AddStateInfoFn = (to: string, params: { [key: string]: any }) => () => void;
 
-/** @hidden */
-export const IncorrectStateNameTypeError = new Error('State name provided to <UISref {to}> must be a string.');
-
 /** @internalapi */
 const rootAddStateInfoFn: AddStateInfoFn = () => () => undefined;
 export const UISrefActiveContext = React.createContext<AddStateInfoFn>(rootAddStateInfoFn);

src/components/__tests__/UIRouter.test.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { mount } from 'enzyme';
-
+import { pushStateLocationPlugin } from '@uirouter/core';
 import {
   UIRouter,
   UIRouterContext,
   UIRouterReact,
   memoryLocationPlugin,
+  ReactStateDeclaration,
+  servicesPlugin,
 } from '../../index';
 
 class Child extends React.Component<any, any> {
@@ -20,21 +22,19 @@ class Child extends React.Component<any, any> {
 
 describe('<UIRouter>', () => {
   it('throws an error if no plugin or router instance is passed via prop', () => {
-    expect(() => {
-      const wrapper = mount(
+    expect(() =>
+      mount(
         <UIRouter>
           <Child />
         </UIRouter>
-      );
-    }).toThrow();
+      )
+    ).toThrow();
   });
 
   it('creates a router instance', () => {
     const wrapper = mount(
       <UIRouter plugins={[memoryLocationPlugin]} states={[]}>
-        <UIRouterContext.Consumer>
-          {router => <Child router={router} />}
-        </UIRouterContext.Consumer>
+        <UIRouterContext.Consumer>{router => <Child router={router} />}</UIRouterContext.Consumer>
       </UIRouter>
     );
     expect(wrapper.find(Child).props().router).toBeDefined();
@@ -45,32 +45,34 @@ describe('<UIRouter>', () => {
     router.plugin(memoryLocationPlugin);
     const wrapper = mount(
       <UIRouter router={router}>
-        <UIRouterContext.Consumer>
-          {router => <Child router={router} />}
-        </UIRouterContext.Consumer>
+        <UIRouterContext.Consumer>{router => <Child router={router} />}</UIRouterContext.Consumer>
       </UIRouter>
     );
     expect(wrapper.find(Child).props().router).toBe(router);
   });
 
   describe('<UIRouterCosumer>', () => {
     it('passes down the router instance', () => {
-      const wrapper = mount(
+      let router;
+
+      mount(
         <UIRouter plugins={[memoryLocationPlugin]}>
           <UIRouterContext.Consumer>
-            {router => {
-              expect(router).toBeInstanceOf(UIRouterReact);
+            {_router => {
+              router = _router;
               return null;
             }}
           </UIRouterContext.Consumer>
         </UIRouter>
       );
+
+      expect(router).toBeInstanceOf(UIRouterReact);
     });
 
     it('passes down the correct router instance when passed via props', () => {
       const router = new UIRouterReact();
       router.plugin(memoryLocationPlugin);
-      const wrapper = mount(
+      mount(
         <UIRouter router={router}>
           <UIRouterContext.Consumer>
             {_router => {
@@ -83,3 +85,14 @@ describe('<UIRouter>', () => {
     });
   });
 });
+
+export const makeTestRouter = (states: ReactStateDeclaration[]) => {
+  const router = new UIRouterReact();
+  router.plugin(servicesPlugin);
+  router.plugin(pushStateLocationPlugin);
+  states.forEach(state => router.stateRegistry.register(state));
+
+  const mountInRouter: typeof mount = (children, opts) => mount(<UIRouter router={router}>{children}</UIRouter>, opts);
+
+  return { router, mountInRouter };
+};