fix(uiview): Fix uiCanExit when routing to a React.forwardRef()

Author: christopherthielen

src/components/UIView.tsx

@@ -152,7 +152,10 @@ class View extends Component<UIViewProps, UIViewState> {
     // only class components can implement the
     // uiCanExit hook and ref doesn't work on
     // stateless function components
-    if (typeof component !== 'string' && !!component.prototype.render) {
+    if (
+      typeof component !== 'string' &&
+      (!!component.render || (component.prototype && !!component.prototype.render))
+    ) {
       props.ref = c => {
         this.componentInstance = c;
         this.registerUiCanExitHook(stateName);

src/components/__tests__/UIView.test.tsx

@@ -245,6 +245,40 @@ describe('<UIView>', () => {
       expect(uiCanExitSpy).toBeCalled();
     });
 
+    it('calls uiCanExit function of a React.forwardRef() State Component when unmounting', async () => {
+      let uiCanExitSpy = jest.fn();
+      class Comp extends React.Component<any, any> {
+        uiCanExit = uiCanExitSpy;
+        render() {
+          return <span>UiCanExitHookComponent</span>;
+        }
+      }
+      const ForwardRef = React.forwardRef((props, ref) => <Comp {...props} ref={ref} />);
+      const Exit = () => <span>exit</span>;
+      router = new UIRouterReact();
+      router.plugin(servicesPlugin);
+      router.plugin(memoryLocationPlugin);
+      router.stateRegistry.register({
+        name: '__state',
+        component: ForwardRef,
+      } as ReactStateDeclaration);
+      router.stateRegistry.register({
+        name: 'exit',
+        component: Exit,
+      } as ReactStateDeclaration);
+      const wrapper = mount(
+        <UIRouter router={router}>
+          <UIView />
+        </UIRouter>
+      );
+      await router.stateService.go('__state');
+      console.log(wrapper.html());
+      expect(wrapper.html()).toEqual('<span>UiCanExitHookComponent</span>');
+      await router.stateService.go('exit');
+      expect(wrapper.html()).toEqual('<span>exit</span>');
+      expect(uiCanExitSpy).toBeCalled();
+    });
+
     it('deregisters the UIView when unmounted', () => {
       const Component = props => <UIRouter router={router}>{props.show ? <UIView /> : <div />}</UIRouter>;
       const wrapper = mount(<Component show={true} />);