From e2546a4002ca019a67fecab3ebccf54d97780910 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sampo=20Kivist=C3=B6?= <sampo.kivisto@live.fi>
Date: Wed, 6 Sep 2023 22:03:54 +0300
Subject: [PATCH] Build pass and more tests pass, eslint still failing

---
 packages/inferno-compat/README.md             |   1 -
 .../__tests__/ReactClass.spec.jsx             |  24 +-
 .../__tests__/ReactComponent.spec.jsx         |   4 +-
 .../ReactComponentLifeCycle.spec.jsx          | 212 +++++++++++-------
 .../ReactCompositeComponentState.spec.jsx     | 202 +----------------
 .../inferno-mobx/__tests__/observer.spec.jsx  |   9 +-
 .../__tests__/transactions.spec.jsx           |   2 +-
 .../__tests__/withRouter.spec.tsx             |   1 -
 packages/inferno-router/src/Route.ts          |  16 +-
 packages/inferno-router/src/withRouter.ts     |   3 +-
 10 files changed, 161 insertions(+), 313 deletions(-)

diff --git a/packages/inferno-compat/README.md b/packages/inferno-compat/README.md
index 1b461fcc8..1c3bf274e 100644
--- a/packages/inferno-compat/README.md
+++ b/packages/inferno-compat/README.md
@@ -53,7 +53,6 @@ install `rc-css-transition-group-modern` package.
 
 ### `react`
 
-- `React.createClass`
 - `React.createElement`
 - `React.cloneElement`
 - `React.Component`
diff --git a/packages/inferno-compat/__tests__/ReactClass.spec.jsx b/packages/inferno-compat/__tests__/ReactClass.spec.jsx
index 2f6487a44..f26dbae51 100644
--- a/packages/inferno-compat/__tests__/ReactClass.spec.jsx
+++ b/packages/inferno-compat/__tests__/ReactClass.spec.jsx
@@ -249,17 +249,17 @@ describe('ReactClass-spec', function () {
       }
     }
 
-    const Outer = React.createClass({
-      childContextTypes: {
+    class Outer extends React.Component{
+      static childContextTypes = {
         className: React.PropTypes.string,
-      },
+      }
       getChildContext() {
         return { className: 'foo' };
-      },
+      }
       render() {
         return <Foo />;
-      },
-    });
+      }
+    }
 
     const container = document.createElement('div');
     ReactDOM.render(<Outer />, container);
@@ -287,14 +287,14 @@ describe('ReactClass-spec', function () {
   // });
 
   it('should work with a null getInitialState() return value', function () {
-    const Component = React.createClass({
-      getInitialState: function () {
+    class Component extends React.Component{
+      getInitialState() {
         return null;
-      },
-      render: function () {
+      }
+      render() {
         return <span />;
-      },
-    });
+      }
+    }
     expect(() => renderIntoDocument(<Component />)).not.toThrow();
   });
 
diff --git a/packages/inferno-compat/__tests__/ReactComponent.spec.jsx b/packages/inferno-compat/__tests__/ReactComponent.spec.jsx
index 227022e91..2441723b4 100644
--- a/packages/inferno-compat/__tests__/ReactComponent.spec.jsx
+++ b/packages/inferno-compat/__tests__/ReactComponent.spec.jsx
@@ -227,7 +227,7 @@ describe('ReactComponent', function () {
     }
 
     class Child extends React.Component {
-      static childContextTypes: {
+      static childContextTypes = {
         foo: React.PropTypes.string
       };
 
@@ -235,7 +235,7 @@ describe('ReactComponent', function () {
         return {
           foo: 'bar'
         };
-      },
+      }
 
       render() {
         return React.Children.only(this.props.children);
diff --git a/packages/inferno-compat/__tests__/ReactComponentLifeCycle.spec.jsx b/packages/inferno-compat/__tests__/ReactComponentLifeCycle.spec.jsx
index 1c251c993..c61b36068 100644
--- a/packages/inferno-compat/__tests__/ReactComponentLifeCycle.spec.jsx
+++ b/packages/inferno-compat/__tests__/ReactComponentLifeCycle.spec.jsx
@@ -102,14 +102,14 @@ describe('ReactComponentLifeCycle', function () {
 
   it('should not reuse an instance when it has been unmounted', function () {
     var container = document.createElement('div');
-    var StatefulComponent = React.createClass({
-      getInitialState: function () {
+    class StatefulComponent extends React.Component {
+      getInitialState() {
         return {};
-      },
-      render: function () {
+      }
+      render() {
         return <div />;
       }
-    });
+    }
     var element = <StatefulComponent />;
 
     var firstInstance = ReactDOM.render(element, container);
@@ -125,31 +125,31 @@ describe('ReactComponentLifeCycle', function () {
   it('it should fire onDOMReady when already in onDOMReady', function (done) {
     var _testJournal = [];
 
-    var Child = React.createClass({
-      componentDidMount: function () {
+    class Child extends React.Component {
+      componentDidMount() {
         _testJournal.push('Child:onDOMReady');
-      },
-      render: function () {
+      }
+      render() {
         return <div />;
       }
-    });
+    }
 
-    var SwitcherParent = React.createClass({
-      getInitialState: function () {
+    class SwitcherParent extends React.Component {
+      getInitialState() {
         _testJournal.push('SwitcherParent:getInitialState');
         return { showHasOnDOMReadyComponent: false };
-      },
-      componentDidMount: function () {
+      }
+      componentDidMount() {
         _testJournal.push('SwitcherParent:onDOMReady');
         this.switchIt();
-      },
-      switchIt: function () {
+      }
+      switchIt() {
         this.setState({ showHasOnDOMReadyComponent: true });
-      },
-      render: function () {
+      }
+      render() {
         return <div>{this.state.showHasOnDOMReadyComponent ? <Child /> : <div> </div>}</div>;
       }
-    });
+    }
 
     var instance = <SwitcherParent />;
     renderIntoDocument(instance);
@@ -179,14 +179,16 @@ describe('ReactComponentLifeCycle', function () {
   // });
 
   it('should allow update state inside of componentWillMount', function () {
-    var StatefulComponent = React.createClass({
-      componentWillMount: function () {
+    class StatefulComponent extends React.Component {
+      componentWillMount() {
         this.setState({ stateField: 'something' });
-      },
-      render: function () {
+      }
+
+      render() {
         return <div />;
       }
-    });
+    }
+
     var instance = <StatefulComponent />;
     expect(function () {
       renderIntoDocument(instance);
@@ -195,16 +197,17 @@ describe('ReactComponentLifeCycle', function () {
 
   it('should not allow update state inside of getInitialState', function () {
     spyOn(console, 'error');
-    var StatefulComponent = React.createClass({
-      getInitialState: function () {
+    class StatefulComponent extends React.Component {
+      getInitialState() {
         this.setState({ stateField: 'something' });
 
         return { stateField: 'somethingelse' };
-      },
-      render: function () {
+      }
+      render() {
         return <div />;
       }
-    });
+    }
+
     expect(() => renderIntoDocument(<StatefulComponent />)).toThrow();
     // expect(console.error.calls.count()).toBe(1);
     // expect(console.error.argsForCall[0][0]).toBe(
@@ -217,18 +220,18 @@ describe('ReactComponentLifeCycle', function () {
 
   it('should correctly determine if a component is mounted', function () {
     spyOn(console, 'error');
-    var Component = React.createClass({
-      componentWillMount: function () {
+    class Component extends React.Component {
+      componentWillMount() {
         expect(this.isMounted()).toBeFalsy();
-      },
-      componentDidMount: function () {
+      }
+      componentDidMount() {
         expect(this.isMounted()).toBeTruthy();
-      },
-      render: function () {
+      }
+      render() {
         expect(this.isMounted()).toBeFalsy();
         return <div />;
       }
-    });
+    }
 
     var element = <Component />;
 
@@ -243,18 +246,18 @@ describe('ReactComponentLifeCycle', function () {
 
   it('should correctly determine if a null component is mounted', function () {
     spyOn(console, 'error');
-    var Component = React.createClass({
-      componentWillMount: function () {
+    class Component extends React.Component {
+      componentWillMount() {
         expect(this.isMounted()).toBeFalsy();
-      },
-      componentDidMount: function () {
+      }
+      componentDidMount() {
         expect(this.isMounted()).toBeTruthy();
-      },
-      render: function () {
+      }
+      render() {
         expect(this.isMounted()).toBeFalsy();
         return null;
       }
-    });
+    }
 
     var element = <Component />;
 
@@ -268,11 +271,11 @@ describe('ReactComponentLifeCycle', function () {
   });
 
   it('isMounted should return false when unmounted', function () {
-    var Component = React.createClass({
-      render: function () {
+    class Component extends React.Component {
+      render() {
         return <div />;
       }
-    });
+    }
 
     var container = document.createElement('div');
     var instance = ReactDOM.render(<Component />, container);
@@ -390,28 +393,29 @@ describe('ReactComponentLifeCycle', function () {
   // });
 
   it('should not throw when updating an auxiliary component', function () {
-    var Tooltip = React.createClass({
-      render: function () {
+    class Tooltip extends React.Component {
+      render() {
         return <div>{this.props.children}</div>;
-      },
-      componentDidMount: function () {
+      }
+      componentDidMount() {
         this.container = document.createElement('div');
         this.updateTooltip();
-      },
-      componentDidUpdate: function () {
+      }
+      componentDidUpdate() {
         this.updateTooltip();
-      },
-      updateTooltip: function () {
+      }
+      updateTooltip() {
         // Even though this.props.tooltip has an owner, updating it shouldn't
         // throw here because it's mounted as a root component
         ReactDOM.render(this.props.tooltip, this.container);
       }
-    });
-    var Component = React.createClass({
-      render: function () {
+    }
+
+    class Component extends React.Component {
+      render() {
         return <Tooltip tooltip={<div>{this.props.tooltipText}</div>}>{this.props.text}</Tooltip>;
       }
-    });
+    }
 
     var container = document.createElement('div');
     ReactDOM.render(<Component text="uno" tooltipText="one" />, container);
@@ -425,19 +429,20 @@ describe('ReactComponentLifeCycle', function () {
     /**
      * calls setState in an componentDidMount.
      */
-    var SetStateInComponentDidMount = React.createClass({
-      getInitialState: function () {
+    class SetStateInComponentDidMount extends React.Component {
+      getInitialState() {
         return {
           stateField: this.props.valueToUseInitially
         };
-      },
-      componentDidMount: function () {
+      }
+      componentDidMount() {
         this.setState({ stateField: this.props.valueToUseInOnDOMReady });
-      },
-      render: function () {
+      }
+      render() {
         return <div />;
       }
-    });
+    }
+
     var instance = <SetStateInComponentDidMount valueToUseInitially="hello" valueToUseInOnDOMReady="goodbye" />;
     instance = renderIntoDocument(instance);
 
@@ -456,34 +461,67 @@ describe('ReactComponentLifeCycle', function () {
         return true;
       };
     };
-    var Outer = React.createClass({
-      render: function () {
+    class Outer extends React.Component {
+      render() {
         return (
           <div>
             <Inner x={this.props.x} />
           </div>
         );
-      },
-      componentWillMount: logger('outer componentWillMount'),
-      componentDidMount: logger('outer componentDidMount'),
-      componentWillReceiveProps: logger('outer componentWillReceiveProps'),
-      shouldComponentUpdate: logger('outer shouldComponentUpdate'),
-      componentWillUpdate: logger('outer componentWillUpdate'),
-      componentDidUpdate: logger('outer componentDidUpdate'),
-      componentWillUnmount: logger('outer componentWillUnmount')
-    });
-    var Inner = React.createClass({
-      render: function () {
+      }
+      componentWillMount() {
+       log.push('outer componentWillMount');
+      }
+      componentDidMount() {
+        log.push('outer componentDidMount');
+      }
+      componentWillReceiveProps() {
+        log.push('outer componentWillReceiveProps')
+      }
+      shouldComponentUpdate() {
+        log.push('outer shouldComponentUpdate')
+
+        return true;
+      }
+      componentWillUpdate() {
+        log.push('outer componentWillUpdate')
+      }
+      componentDidUpdate() {
+        log.push('outer componentDidUpdate')
+      }
+      componentWillUnmount() {
+        log.push('outer componentWillUnmount')
+      }
+    }
+
+    class Inner extends React.Component {
+      render() {
         return <span>{this.props.x}</span>;
-      },
-      componentWillMount: logger('inner componentWillMount'),
-      componentDidMount: logger('inner componentDidMount'),
-      componentWillReceiveProps: logger('inner componentWillReceiveProps'),
-      shouldComponentUpdate: logger('inner shouldComponentUpdate'),
-      componentWillUpdate: logger('inner componentWillUpdate'),
-      componentDidUpdate: logger('inner componentDidUpdate'),
-      componentWillUnmount: logger('inner componentWillUnmount')
-    });
+      }
+      componentWillMount() {
+        log.push('inner componentWillMount');
+      }
+      componentDidMount() {
+        log.push('inner componentDidMount');
+      }
+      componentWillReceiveProps() {
+        log.push('inner componentWillReceiveProps')
+      }
+      shouldComponentUpdate() {
+        log.push('inner shouldComponentUpdate')
+
+        return true;
+      }
+      componentWillUpdate() {
+        log.push('inner componentWillUpdate')
+      }
+      componentDidUpdate() {
+        log.push('inner componentDidUpdate')
+      }
+      componentWillUnmount() {
+        log.push('inner componentWillUnmount')
+      }
+    }
 
     var container = document.createElement('div');
     log = [];
diff --git a/packages/inferno-compat/__tests__/ReactCompositeComponentState.spec.jsx b/packages/inferno-compat/__tests__/ReactCompositeComponentState.spec.jsx
index e5c656985..c6fc4a907 100644
--- a/packages/inferno-compat/__tests__/ReactCompositeComponentState.spec.jsx
+++ b/packages/inferno-compat/__tests__/ReactCompositeComponentState.spec.jsx
@@ -11,208 +11,28 @@ import React from 'inferno-compat';
 
 var ReactDOM = React;
 
-var TestComponent;
-
 describe('ReactCompositeComponent-state', function () {
-  beforeEach(function () {
-    TestComponent = React.createClass({
-      peekAtState: function (from, state) {
-        state = state || this.state;
-        this.props.stateListener(from, state && state.color);
-      },
-
-      peekAtCallback: function (from) {
-        return () => this.peekAtState(from);
-      },
-
-      setFavoriteColor: function (nextColor) {
-        this.setState({ color: nextColor }, this.peekAtCallback('setFavoriteColor'));
-      },
-
-      getInitialState: function () {
-        this.peekAtState('getInitialState');
-        return { color: 'red' };
-      },
-
-      render: function () {
-        this.peekAtState('render');
-        return <div>{this.state.color}</div>;
-      },
-
-      componentWillMount: function () {
-        this.peekAtState('componentWillMount-start');
-        this.setState(function (state) {
-          this.peekAtState('before-setState-sunrise', state);
-        });
-        this.setState({ color: 'sunrise' }, this.peekAtCallback('setState-sunrise'));
-        this.setState(function (state) {
-          this.peekAtState('after-setState-sunrise', state);
-        });
-        this.peekAtState('componentWillMount-after-sunrise');
-        this.setState({ color: 'orange' }, this.peekAtCallback('setState-orange'));
-        this.setState(function (state) {
-          this.peekAtState('after-setState-orange', state);
-        });
-        this.peekAtState('componentWillMount-end');
-      },
-
-      componentDidMount: function () {
-        this.peekAtState('componentDidMount-start');
-        this.setState({ color: 'yellow' }, this.peekAtCallback('setState-yellow'));
-        this.peekAtState('componentDidMount-end');
-      },
-
-      componentWillReceiveProps: function (newProps) {
-        this.peekAtState('componentWillReceiveProps-start');
-        if (newProps.nextColor) {
-          this.setState(function (state) {
-            this.peekAtState('before-setState-receiveProps', state);
-            return { color: newProps.nextColor };
-          });
-          this.replaceState({ color: undefined });
-          this.setState(function (state) {
-            this.peekAtState('before-setState-again-receiveProps', state);
-            return { color: newProps.nextColor };
-          }, this.peekAtCallback('setState-receiveProps'));
-          this.setState(function (state) {
-            this.peekAtState('after-setState-receiveProps', state);
-          });
-        }
-        this.peekAtState('componentWillReceiveProps-end');
-      },
-
-      shouldComponentUpdate: function (nextProps, nextState) {
-        this.peekAtState('shouldComponentUpdate-currentState');
-        this.peekAtState('shouldComponentUpdate-nextState', nextState);
-        return true;
-      },
-
-      componentWillUpdate: function (nextProps, nextState) {
-        this.peekAtState('componentWillUpdate-currentState');
-        this.peekAtState('componentWillUpdate-nextState', nextState);
-      },
-
-      componentDidUpdate: function (prevProps, prevState) {
-        this.peekAtState('componentDidUpdate-currentState');
-        this.peekAtState('componentDidUpdate-prevState', prevState);
-      },
-
-      componentWillUnmount: function () {
-        this.peekAtState('componentWillUnmount');
-      }
-    });
-  });
-
-  // it('should support setting state', function() {
-  //   var container = document.createElement('div');
-  //   document.body.appendChild(container);
-  //
-  //   var stateListener = mocks.getMockFunction();
-  //   var instance = ReactDOM.render(
-  //     <TestComponent stateListener={stateListener} />,
-  //     container,
-  //     function peekAtInitialCallback() {
-  //       this.peekAtState('initial-callback');
-  //     }
-  //   );
-  //   ReactDOM.render(
-  //     <TestComponent stateListener={stateListener} nextColor="green" />,
-  //     container,
-  //     instance.peekAtCallback('setProps')
-  //   );
-  //   instance.setFavoriteColor('blue');
-  //   instance.forceUpdate(instance.peekAtCallback('forceUpdate'));
-  //
-  //   ReactDOM.unmountComponentAtNode(container);
-  //
-  //   expect(stateListener.calls.join('\n')).toEqual([
-  //     // there is no state when getInitialState() is called
-  //     ['getInitialState', null],
-  //     ['componentWillMount-start', 'red'],
-  //     // setState()'s only enqueue pending states.
-  //     ['componentWillMount-after-sunrise', 'red'],
-  //     ['componentWillMount-end', 'red'],
-  //     // pending state queue is processed
-  //     ['before-setState-sunrise', 'red'],
-  //     ['after-setState-sunrise', 'sunrise'],
-  //     ['after-setState-orange', 'orange'],
-  //     // pending state has been applied
-  //     ['render', 'orange'],
-  //     ['componentDidMount-start', 'orange'],
-  //     // setState-sunrise and setState-orange should be called here,
-  //     // after the bug in #1740
-  //     // componentDidMount() called setState({color:'yellow'}), which is async.
-  //     // The update doesn't happen until the next flush.
-  //     ['componentDidMount-end', 'orange'],
-  //     ['shouldComponentUpdate-currentState', 'orange'],
-  //     ['shouldComponentUpdate-nextState', 'yellow'],
-  //     ['componentWillUpdate-currentState', 'orange'],
-  //     ['componentWillUpdate-nextState', 'yellow'],
-  //     ['render', 'yellow'],
-  //     ['componentDidUpdate-currentState', 'yellow'],
-  //     ['componentDidUpdate-prevState', 'orange'],
-  //     ['setState-sunrise', 'yellow'],
-  //     ['setState-orange', 'yellow'],
-  //     ['setState-yellow', 'yellow'],
-  //     ['initial-callback', 'yellow'],
-  //     ['componentWillReceiveProps-start', 'yellow'],
-  //     // setState({color:'green'}) only enqueues a pending state.
-  //     ['componentWillReceiveProps-end', 'yellow'],
-  //     // pending state queue is processed
-  //     // before-setState-receiveProps never called, due to replaceState.
-  //     ['before-setState-again-receiveProps', undefined],
-  //     ['after-setState-receiveProps', 'green'],
-  //     ['shouldComponentUpdate-currentState', 'yellow'],
-  //     ['shouldComponentUpdate-nextState', 'green'],
-  //     ['componentWillUpdate-currentState', 'yellow'],
-  //     ['componentWillUpdate-nextState', 'green'],
-  //     ['render', 'green'],
-  //     ['componentDidUpdate-currentState', 'green'],
-  //     ['componentDidUpdate-prevState', 'yellow'],
-  //     ['setState-receiveProps', 'green'],
-  //     ['setProps', 'green'],
-  //     // setFavoriteColor('blue')
-  //     ['shouldComponentUpdate-currentState', 'green'],
-  //     ['shouldComponentUpdate-nextState', 'blue'],
-  //     ['componentWillUpdate-currentState', 'green'],
-  //     ['componentWillUpdate-nextState', 'blue'],
-  //     ['render', 'blue'],
-  //     ['componentDidUpdate-currentState', 'blue'],
-  //     ['componentDidUpdate-prevState', 'green'],
-  //     ['setFavoriteColor', 'blue'],
-  //     // forceUpdate()
-  //     ['componentWillUpdate-currentState', 'blue'],
-  //     ['componentWillUpdate-nextState', 'blue'],
-  //     ['render', 'blue'],
-  //     ['componentDidUpdate-currentState', 'blue'],
-  //     ['componentDidUpdate-prevState', 'blue'],
-  //     ['forceUpdate', 'blue'],
-  //     // unmountComponent()
-  //     // state is available within `componentWillUnmount()`
-  //     ['componentWillUnmount', 'blue'],
-  //   ].join('\n'));
-  // });
-
   it('should batch unmounts', function () {
     var outer;
-    var Inner = React.createClass({
-      render: function () {
+    class Inner extends React.Component{
+      render() {
         return <div />;
-      },
-      componentWillUnmount: function () {
+      }
+      componentWillUnmount() {
         // This should get silently ignored (maybe with a warning), but it
         // shouldn't break React.
         outer.setState({ showInner: false });
       }
-    });
-    var Outer = React.createClass({
-      getInitialState: function () {
+    }
+
+    class Outer extends React.Component {
+      getInitialState() {
         return { showInner: true };
-      },
-      render: function () {
+      }
+      render() {
         return <div>{this.state.showInner && <Inner />}</div>;
       }
-    });
+    }
 
     var container = document.createElement('div');
     outer = ReactDOM.render(<Outer />, container);
diff --git a/packages/inferno-mobx/__tests__/observer.spec.jsx b/packages/inferno-mobx/__tests__/observer.spec.jsx
index d5b8da987..d840008b9 100644
--- a/packages/inferno-mobx/__tests__/observer.spec.jsx
+++ b/packages/inferno-mobx/__tests__/observer.spec.jsx
@@ -20,11 +20,10 @@ const TodoItem = observer(function TodoItem(props) {
 let todoListRenderings = 0;
 let todoListWillReactCount = 0;
 const TodoList = observer(
-  createClass({
-    renderings: 0,
+  class {
     componentWillReact() {
       todoListWillReactCount++;
-    },
+    }
     render() {
       todoListRenderings++;
       const todos = store.todos;
@@ -37,8 +36,8 @@ const TodoList = observer(
         </div>
       );
     }
-  })
-);
+  }
+)
 
 const App = () => <TodoList />;
 
diff --git a/packages/inferno-mobx/__tests__/transactions.spec.jsx b/packages/inferno-mobx/__tests__/transactions.spec.jsx
index d0ca1be77..49c2eff89 100644
--- a/packages/inferno-mobx/__tests__/transactions.spec.jsx
+++ b/packages/inferno-mobx/__tests__/transactions.spec.jsx
@@ -34,7 +34,7 @@ describe('Mobx Transacations', () => {
     let willReactCount = 0;
     autorun(() => (asText = [foo.a.get(), foo.b.get(), foo.c.get()].join(':')));
 
-    observer(
+    const Test = observer(
       class MyCom extends Component {
         componentWillReact() {
           willReactCount++;
diff --git a/packages/inferno-router/__tests__/withRouter.spec.tsx b/packages/inferno-router/__tests__/withRouter.spec.tsx
index 0bb551eb3..ab5b61d5f 100644
--- a/packages/inferno-router/__tests__/withRouter.spec.tsx
+++ b/packages/inferno-router/__tests__/withRouter.spec.tsx
@@ -73,7 +73,6 @@ describe('withRouter', () => {
   it('exposes the wrapped component as WrappedComponent', () => {
     const TestComponent = (): InfernoNode => <div />;
     const decorated = withRouter(TestComponent);
-    // @ts-expect-error test assertion
     expect(decorated.WrappedComponent).toBe(TestComponent);
   });
 
diff --git a/packages/inferno-router/src/Route.ts b/packages/inferno-router/src/Route.ts
index 53d6b0a49..5140a8d61 100644
--- a/packages/inferno-router/src/Route.ts
+++ b/packages/inferno-router/src/Route.ts
@@ -1,9 +1,6 @@
 import {
   Component,
-  type ComponentType,
   createComponentVNode,
-  type ForwardRef,
-  type Inferno,
   type InfernoNode,
 } from 'inferno';
 import { VNodeFlags } from 'inferno-vnode-flags';
@@ -28,9 +25,9 @@ export interface Match<P extends Record<string, string>> {
 }
 
 export interface RouteComponentProps<P extends Record<string, string>> {
-  match?: Match<P>;
-  location?: Location;
-  history?: History;
+  match: Match<P>;
+  location: Location;
+  history: History;
   staticContext?: any;
 }
 
@@ -42,11 +39,8 @@ export interface IRouteProps {
   sensitive?: boolean;
   loader?: (props: TLoaderProps<any>) => Promise<any>;
   component?:
-    | Inferno.ComponentClass<any>
-    | ((props: any, context: any) => InfernoNode)
-    | ComponentType<any>
-    | Component<any, any>
-    | ForwardRef<any, any>;
+    | typeof Component<any, any>
+    | ((props: any, context: any) => InfernoNode);
   render?: (props: RouteComponentProps<any>, context: any) => InfernoNode;
   location?: Pick<Location, 'pathname'>;
   children?: ((props: RouteComponentProps<any>) => InfernoNode) | InfernoNode;
diff --git a/packages/inferno-router/src/withRouter.ts b/packages/inferno-router/src/withRouter.ts
index 8dabd01d8..3765b0a63 100644
--- a/packages/inferno-router/src/withRouter.ts
+++ b/packages/inferno-router/src/withRouter.ts
@@ -20,10 +20,9 @@ interface IWithRouterProps {
  */
 export function withRouter<
   P extends RouteComponentProps<any> & IWithRouterProps,
-  S = {},
 >(
   Com: Function | ComponentType<P> | Component<P, any> | ForwardRef<P, any>,
-): typeof Component<RouteComponentProps<any> & IWithRouterProps, S> {
+): any {
   const C: any = function (props: RouteComponentProps<any> & IWithRouterProps) {
     const { wrappedComponentRef, ...remainingProps } = props;