From 6b2714afc4dc263940eb67f4e84922390e0a9d48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sampo=20Kivist=C3=B6?= <sampo.kivisto@live.fi>
Date: Sat, 13 Apr 2024 13:49:23 +0300
Subject: [PATCH] Converted inferno-server tests to TSX github#1632

---
 ...ver.jsx => animationHooks.spec.server.tsx} |  0
 ...x => creation-queuestream.spec.server.tsx} | 81 +++++++++---------
 ...rver.js => creation-stream.spec.server.ts} |  8 +-
 ...er.jsx => creation-stream.spec.server.tsx} | 83 +++++++++----------
 ...spec.server.js => creation.spec.server.ts} |  4 +-
 ...ec.server.jsx => creation.spec.server.tsx} | 30 +++----
 ...rver.jsx => hydration-ext.spec.server.tsx} |  4 +-
 ...pec.server.js => hydration.spec.server.ts} |  0
 ...c.server.jsx => hydration.spec.server.tsx} | 12 +--
 ...rver.jsx => loaderOnRoute.spec.server.tsx} |  8 +-
 ...ec.server.jsx => observer.spec.server.tsx} |  0
 11 files changed, 112 insertions(+), 118 deletions(-)
 rename packages/inferno-server/__tests__/{animationHooks.spec.server.jsx => animationHooks.spec.server.tsx} (100%)
 rename packages/inferno-server/__tests__/{creation-queuestream.spec.server.jsx => creation-queuestream.spec.server.tsx} (93%)
 rename packages/inferno-server/__tests__/{creation-stream.spec.server.js => creation-stream.spec.server.ts} (91%)
 rename packages/inferno-server/__tests__/{creation-stream.spec.server.jsx => creation-stream.spec.server.tsx} (90%)
 rename packages/inferno-server/__tests__/{creation.spec.server.js => creation.spec.server.ts} (97%)
 rename packages/inferno-server/__tests__/{creation.spec.server.jsx => creation.spec.server.tsx} (95%)
 rename packages/inferno-server/__tests__/{hydration-ext.spec.server.jsx => hydration-ext.spec.server.tsx} (98%)
 rename packages/inferno-server/__tests__/{hydration.spec.server.js => hydration.spec.server.ts} (100%)
 rename packages/inferno-server/__tests__/{hydration.spec.server.jsx => hydration.spec.server.tsx} (99%)
 rename packages/inferno-server/__tests__/{loaderOnRoute.spec.server.jsx => loaderOnRoute.spec.server.tsx} (87%)
 rename packages/inferno-server/__tests__/{observer.spec.server.jsx => observer.spec.server.tsx} (100%)

diff --git a/packages/inferno-server/__tests__/animationHooks.spec.server.jsx b/packages/inferno-server/__tests__/animationHooks.spec.server.tsx
similarity index 100%
rename from packages/inferno-server/__tests__/animationHooks.spec.server.jsx
rename to packages/inferno-server/__tests__/animationHooks.spec.server.tsx
diff --git a/packages/inferno-server/__tests__/creation-queuestream.spec.server.jsx b/packages/inferno-server/__tests__/creation-queuestream.spec.server.tsx
similarity index 93%
rename from packages/inferno-server/__tests__/creation-queuestream.spec.server.jsx
rename to packages/inferno-server/__tests__/creation-queuestream.spec.server.tsx
index d5cae78a1..a040a1407 100644
--- a/packages/inferno-server/__tests__/creation-queuestream.spec.server.jsx
+++ b/packages/inferno-server/__tests__/creation-queuestream.spec.server.tsx
@@ -4,7 +4,7 @@ import { streamQueueAsString } from 'inferno-server';
 import concatStream from 'concat-stream';
 import { createElement } from 'inferno-create-element';
 
-class StatefulComponent extends Component {
+class StatefulComponent extends Component<{value: string}> {
   render() {
     return createElement('span', null, `stateless ${this.props.value}!`);
   }
@@ -14,9 +14,9 @@ function WrappedInput(props) {
   return <input type="text" value={props.value} />;
 }
 
-class StatefulPromiseComponent extends Component {
+class StatefulPromiseComponent extends Component<{index: number, value?: unknown}> {
   async getInitialProps() {
-    return await new Promise((resolve, reject) => {
+    return await new Promise((resolve) => {
       // Waits incremenetally for each subindex
       setTimeout(() => {
         resolve({
@@ -35,9 +35,9 @@ class StatefulPromiseComponent extends Component {
   }
 }
 
-class StatefulHierchicalPromiseComponent extends Component {
+class StatefulHierchicalPromiseComponent extends Component<{index: number, value?: unknown}> {
   async getInitialProps() {
-    return await new Promise((resolve, reject) => {
+    return await new Promise((resolve) => {
       // Waits incremenetally for each subindex
       setTimeout(() => {
         resolve({
@@ -239,7 +239,7 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
     },
     {
       description: 'should render a stateful component with promise',
-      template: (value) =>
+      template: () =>
         createElement(
           'div',
           null,
@@ -257,7 +257,7 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
     {
       description:
         'should render a stateful component with promise as hierarchy',
-      template: (value) =>
+      template: () =>
         createElement(StatefulHierchicalPromiseComponent, { index: 1 }),
       result: [
         [
@@ -276,7 +276,7 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
     },
     {
       description: 'should render a stack of stateful component with promise',
-      template: (value) =>
+      template: () =>
         createElement(
           'div',
           null,
@@ -357,6 +357,7 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
     },
     {
       description: 'should ignore children as props',
+      // @ts-expect-error
       template: () => <p children="foo">foo</p>,
       result: '<p>foo</p>',
     },
@@ -423,7 +424,7 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
       description: 'Should not render null styles',
       template: () => (
         <div
-          style={{ 'background-color': null, 'border-bottom-color': null }}
+          style={{ 'background-color': null as any, 'border-bottom-color': null as any }}
         />
       ),
       result: '<div></div>',
@@ -461,17 +462,17 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
     },
     {
       description: 'Should not render empty style attribute #3',
-      template: () => <div style={false} />,
+      template: () => <div style={false as any} />,
       result: '<div></div>',
     },
     {
       description: 'Should not render empty style attribute #4',
-      template: () => <div style={0} />,
+      template: () => <div style={0 as any} />,
       result: '<div></div>',
     },
     {
       description: 'Should not render empty style attribute #5',
-      template: () => <div style={true} />,
+      template: () => <div style={true as any} />,
       result: '<div></div>',
     },
     {
@@ -481,7 +482,7 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
     },
     {
       description: 'Should render div className as number',
-      template: () => <div className={123} />,
+      template: () => <div className={123 as any} />,
       result: '<div class="123"></div>',
     },
     {
@@ -536,16 +537,16 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
   ];
 
   for (const test of testEntries) {
-    it(test.description, async (done) => {
+    it(test.description, async () => {
       const vDom = test.template('foo');
-      return await streamPromise(vDom).then(function (output) {
+
+      return streamPromise(vDom).then((value: string | string[]) => {
         if (typeof test.result === 'object') {
-          expect(output[0]).toEqual(test.result[0]);
-          expect(output[1]).toBe(test.result[1]);
+          expect(value[0]).toEqual(test.result[0]);
+          expect(value[1]).toBe(test.result[1]);
         } else {
-          expect(output[1]).toBe(test.result);
+          expect(value[1]).toBe(test.result);
         }
-        done();
       });
     });
   }
@@ -568,7 +569,7 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
         }
 
         render() {
-          return <div>{this.state.foo}</div>;
+          return <div>{this.state?.foo}</div>;
         }
       }
 
@@ -590,7 +591,7 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
         render() {
           return (
             <div>
-              {this.state.foo}
+              {this.state?.foo}
               <Another />
             </div>
           );
@@ -605,10 +606,10 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
   });
 
   describe('misc', () => {
-    it('Should render single text node using state', async (done) => {
+    it('Should render single text node using state', async () => {
       class Foobar extends Component {
         render() {
-          return this.state.text;
+          return this.state!.text;
         }
 
         componentWillMount() {
@@ -624,14 +625,13 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
         </div>,
       ).then(function (output) {
         expect(output[1]).toEqual('<div>foo</div>');
-        done();
       });
     });
 
-    it('Should render single (number) text node using state', async (done) => {
+    it('Should render single (number) text node using state', async () => {
       class Foobar extends Component {
         render() {
-          return this.state.text;
+          return this.state!.text;
         }
 
         componentWillMount() {
@@ -647,11 +647,10 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
         </div>,
       ).then(function (output) {
         expect(output[1]).toEqual('<div>331</div>');
-        done();
       });
     });
 
-    it('Should render single text node Functional Component', async (done) => {
+    it('Should render single text node Functional Component', async () => {
       function Foobar() {
         return 'foo';
       }
@@ -662,11 +661,10 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
         </div>,
       ).then(function (output) {
         expect(output[1]).toEqual('<div>foo</div>');
-        done();
       });
     });
 
-    it('Should render single (number) text node Functional Component', async (done) => {
+    it('Should render single (number) text node Functional Component', async () => {
       function Foobar() {
         return 0;
       }
@@ -677,13 +675,13 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
         </div>,
       ).then(function (output) {
         expect(output[1]).toEqual('<div>0</div>');
-        done();
       });
     });
 
-    it('Should render checked attribute for input when there is no checked in props', async (done) => {
+    it('Should render checked attribute for input when there is no checked in props', async () => {
       class Foobar extends Component {
         render() {
+          // @ts-expect-error
           return <input count={1} type="checkbox" defaultChecked={true} />;
         }
       }
@@ -696,11 +694,10 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
         expect(output[1]).toEqual(
           '<div><input count="1" type="checkbox" checked="true"></div>',
         );
-        done();
       });
     });
 
-    it('Should render comment when component returns invalid node', async (done) => {
+    it('Should render comment when component returns invalid node', async () => {
       function Foobar() {
         return null;
       }
@@ -711,11 +708,10 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
         </div>,
       ).then(function (output) {
         expect(output[1]).toEqual('<div><!--!--></div>');
-        done();
       });
     });
 
-    it('Should render single text node Class Component', async (done) => {
+    it('Should render single text node Class Component', async () => {
       class Foobar extends Component {
         render() {
           return null;
@@ -728,11 +724,10 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
         </div>,
       ).then(function (output) {
         expect(output[1]).toEqual('<div><!--!--></div>');
-        done();
       });
     });
 
-    it('Should be possible to use getDerivedStateFromProps', async (done) => {
+    it('Should be possible to use getDerivedStateFromProps', async () => {
       class Test extends Component {
         constructor(props) {
           super(props);
@@ -742,27 +737,27 @@ describe('SSR Creation Queue Streams - (non-JSX)', () => {
           };
         }
 
-        static getDerivedStateFromProps(props, state) {
+        static getDerivedStateFromProps(_props, state) {
           return {
             value: state.value + 1,
           };
         }
 
         render() {
-          return <div>{this.state.value}</div>;
+          return <div>{this.state!.value}</div>;
         }
       }
+
       return await streamPromise(<Test />).then(function (output) {
         expect(output[1]).toEqual('<div>1</div>');
-        done();
       });
     });
   });
 });
 
 async function streamPromise(dom) {
-  return await new Promise(function (res, rej) {
-    const chunks = [];
+  return await new Promise(function (res: (value: string[]) => void, rej) {
+    const chunks: string[] = [];
     streamQueueAsString(dom)
       .on('error', rej)
       .on('data', (chunk) => {
diff --git a/packages/inferno-server/__tests__/creation-stream.spec.server.js b/packages/inferno-server/__tests__/creation-stream.spec.server.ts
similarity index 91%
rename from packages/inferno-server/__tests__/creation-stream.spec.server.js
rename to packages/inferno-server/__tests__/creation-stream.spec.server.ts
index 30735c1d8..ffd3c7f78 100644
--- a/packages/inferno-server/__tests__/creation-stream.spec.server.js
+++ b/packages/inferno-server/__tests__/creation-stream.spec.server.ts
@@ -17,9 +17,9 @@ describe('SSR Root Creation Streams - (non-JSX)', () => {
   });
 
   it('should throw with invalid children', async () => {
-    const test = (value) => createElement('a', null, true);
+    const test = () => createElement('a', null, true);
 
-    return await streamPromise(test('foo')).catch((err) => {
+    return await streamPromise(test()).catch((err) => {
       expect(err.toString()).toBe('Error: invalid component');
     });
   });
@@ -60,7 +60,7 @@ describe('SSR Root Creation Streams - (non-JSX)', () => {
         }
 
         render() {
-          return createElement('div', null, this.state.foo);
+          return createElement('div', null, this.state!.foo);
         }
       }
 
@@ -81,7 +81,7 @@ describe('SSR Root Creation Streams - (non-JSX)', () => {
 
         render() {
           return createElement('div', null, [
-            this.state.foo,
+            this.state!.foo,
             createElement(Another),
           ]);
         }
diff --git a/packages/inferno-server/__tests__/creation-stream.spec.server.jsx b/packages/inferno-server/__tests__/creation-stream.spec.server.tsx
similarity index 90%
rename from packages/inferno-server/__tests__/creation-stream.spec.server.jsx
rename to packages/inferno-server/__tests__/creation-stream.spec.server.tsx
index 1c54b50d3..768ac5c87 100644
--- a/packages/inferno-server/__tests__/creation-stream.spec.server.jsx
+++ b/packages/inferno-server/__tests__/creation-stream.spec.server.tsx
@@ -3,7 +3,7 @@ import { streamAsString } from 'inferno-server';
 import concatStream from 'concat-stream';
 import { createElement } from 'inferno-create-element';
 
-class StatefulComponent extends Component {
+class StatefulComponent extends Component<{value: string}> {
   render() {
     return createElement('span', null, `stateless ${this.props.value}!`);
   }
@@ -114,17 +114,17 @@ describe('SSR Creation Streams - (non-JSX)', () => {
     },
     {
       description: 'should render with array text children',
-      template: (value) => createElement('a', null, ['a', 'b']),
+      template: () => createElement('a', null, ['a', 'b']),
       result: '<a>ab</a>'
     },
     {
       description: 'should render with array children containing an array of text children',
-      template: (value) => createElement('a', null, [['a', 'b']]),
+      template: () => createElement('a', null, [['a', 'b']]),
       result: '<a>ab</a>'
     },
     {
       description: 'should render with array null children',
-      template: (value) => createElement('a', null, ['a', null]),
+      template: () => createElement('a', null, ['a', null]),
       result: '<a>a</a>'
     },
     {
@@ -154,17 +154,17 @@ describe('SSR Creation Streams - (non-JSX)', () => {
     },
     {
       description: 'Should not render empty style attribute #3',
-      template: () => <div style={false} />,
+      template: () => <div style={false as any} />,
       result: '<div></div>',
     },
     {
       description: 'Should not render empty style attribute #4',
-      template: () => <div style={0} />,
+      template: () => <div style={0 as any} />,
       result: '<div></div>',
     },
     {
       description: 'Should not render empty style attribute #5',
-      template: () => <div style={true} />,
+      template: () => <div style={true as any} />,
       result: '<div></div>',
     },
     {
@@ -218,6 +218,7 @@ describe('SSR Creation Streams - (non-JSX)', () => {
     },
     {
       description: 'should ignore children as props',
+      // @ts-expect-error
       template: () => <p children="foo">foo</p>,
       result: '<p>foo</p>'
     },
@@ -274,7 +275,7 @@ describe('SSR Creation Streams - (non-JSX)', () => {
     },
     {
       description: 'Should not render null styles',
-      template: () => <div style={{ 'background-color': null, 'border-bottom-color': null }} />,
+      template: () => <div style={{ 'background-color': null as any, 'border-bottom-color': null as any }} />,
       result: '<div></div>'
     },
     {
@@ -299,7 +300,7 @@ describe('SSR Creation Streams - (non-JSX)', () => {
     },
     {
       description: 'Should render div className as number',
-      template: () => <div className={123} />,
+      template: () => <div className={123 as any} />,
       result: '<div class="123"></div>'
     },
     {
@@ -355,7 +356,6 @@ describe('SSR Creation Streams - (non-JSX)', () => {
 
   for (const test of testEntries) {
     it(test.description, () => {
-      const container = document.createElement('div');
       const vDom = test.template('foo');
       return streamPromise(vDom).then(function (output) {
         expect(output).toBe(test.result);
@@ -366,11 +366,12 @@ describe('SSR Creation Streams - (non-JSX)', () => {
   describe('Component hook', () => {
     it('Should allow changing state in CWM', () => {
       class Another extends Component {
+        public state = {
+          foo: 'bar'
+        };
+
         constructor(props, context) {
           super(props, context);
-          this.state = {
-            foo: 'bar'
-          };
         }
 
         componentWillMount() {
@@ -385,12 +386,12 @@ describe('SSR Creation Streams - (non-JSX)', () => {
       }
 
       class Tester extends Component {
+        public state = {
+          foo: 'bar'
+        };
+
         constructor(props, context) {
           super(props, context);
-
-          this.state = {
-            foo: 'bar'
-          };
         }
 
         componentWillMount() {
@@ -418,9 +419,13 @@ describe('SSR Creation Streams - (non-JSX)', () => {
 
   describe('misc', () => {
     it('Should render single text node using state', (done) => {
-      class Foobar extends Component {
+      interface FoobarState {
+        text: string
+      }
+
+      class Foobar extends Component<unknown, FoobarState> {
         render() {
-          return this.state.text;
+          return this.state?.text;
         }
 
         componentWillMount() {
@@ -430,7 +435,7 @@ describe('SSR Creation Streams - (non-JSX)', () => {
         }
       }
 
-      return streamPromise(
+      streamPromise(
         <div>
           <Foobar />
         </div>
@@ -441,9 +446,13 @@ describe('SSR Creation Streams - (non-JSX)', () => {
     });
 
     it('Should render single (number) text node using state', (done) => {
-      class Foobar extends Component {
+      interface FoobarState {
+        text: number
+      }
+
+      class Foobar extends Component<unknown, FoobarState> {
         render() {
-          return this.state.text;
+          return this.state?.text;
         }
 
         componentWillMount() {
@@ -453,7 +462,7 @@ describe('SSR Creation Streams - (non-JSX)', () => {
         }
       }
 
-      return streamPromise(
+      streamPromise(
         <div>
           <Foobar />
         </div>
@@ -468,7 +477,7 @@ describe('SSR Creation Streams - (non-JSX)', () => {
         return 'foo';
       }
 
-      return streamPromise(
+      streamPromise(
         <div>
           <Foobar />
         </div>
@@ -483,7 +492,7 @@ describe('SSR Creation Streams - (non-JSX)', () => {
         return 0;
       }
 
-      return streamPromise(
+      streamPromise(
         <div>
           <Foobar />
         </div>
@@ -493,25 +502,12 @@ describe('SSR Creation Streams - (non-JSX)', () => {
       });
     });
 
-    // it('Should render checked attribute for input when there is no checked in props', (done) => {
-    //   class Foobar extends Component {
-    //     render() {
-    //       return <input count={1} type="checkbox" defaultChecked={true}/>;
-    //     }
-    //   }
-    //
-    //   return streamPromise(<div><Foobar /></div>).then(function(output) {
-    //     expect(output).toEqual('<div><input count="1" type="checkbox" checked="true"></div>');
-    //     done();
-    //   });
-    // });
-
     it('Should render comment when component returns invalid node', (done) => {
       function Foobar() {
         return null;
       }
 
-      return streamPromise(
+      streamPromise(
         <div>
           <Foobar />
         </div>
@@ -528,7 +524,7 @@ describe('SSR Creation Streams - (non-JSX)', () => {
         }
       }
 
-      return streamPromise(
+      streamPromise(
         <div>
           <Foobar />
         </div>
@@ -548,17 +544,18 @@ describe('SSR Creation Streams - (non-JSX)', () => {
           };
         }
 
-        static getDerivedStateFromProps(props, state) {
+        static getDerivedStateFromProps(_props, state) {
           return {
             value: state.value + 1
           };
         }
 
         render() {
-          return <div>{this.state.value}</div>;
+          return <div>{this.state!.value}</div>;
         }
       }
-      return streamPromise(<Test />).then(function (output) {
+
+      streamPromise(<Test />).then(function (output) {
         expect(output).toEqual('<div>1</div>');
         done();
       });
diff --git a/packages/inferno-server/__tests__/creation.spec.server.js b/packages/inferno-server/__tests__/creation.spec.server.ts
similarity index 97%
rename from packages/inferno-server/__tests__/creation.spec.server.js
rename to packages/inferno-server/__tests__/creation.spec.server.ts
index 66dff8175..9fccdbac3 100644
--- a/packages/inferno-server/__tests__/creation.spec.server.js
+++ b/packages/inferno-server/__tests__/creation.spec.server.ts
@@ -34,9 +34,9 @@ describe('SSR Creation (non-JSX)', () => {
         createElement(
           'div',
           null,
-          createElement('span', { style: { 'border-left': 10 } }),
+          createElement('span', { style: { 'border-left': '10px' } }),
         ),
-      result: '<div><span style="border-left:10;"></span></div>',
+      result: '<div><span style="border-left:10px;"></span></div>',
     },
     {
       description: 'should render div with span child and styling #3',
diff --git a/packages/inferno-server/__tests__/creation.spec.server.jsx b/packages/inferno-server/__tests__/creation.spec.server.tsx
similarity index 95%
rename from packages/inferno-server/__tests__/creation.spec.server.jsx
rename to packages/inferno-server/__tests__/creation.spec.server.tsx
index 816a5f8a0..b27592056 100644
--- a/packages/inferno-server/__tests__/creation.spec.server.jsx
+++ b/packages/inferno-server/__tests__/creation.spec.server.tsx
@@ -4,7 +4,7 @@ import { createElement } from 'inferno-create-element';
 import { ChildFlags } from 'inferno-vnode-flags';
 import { hydrate } from 'inferno-hydrate';
 
-function WrappedInput(props) {
+function WrappedInput(props: {value: string}) {
   return <input type="text" value={props.value} />;
 }
 
@@ -56,6 +56,7 @@ describe('SSR Creation (JSX)', () => {
     },
     {
       description: 'should ignore children as props',
+      // @ts-expect-error
       template: () => <p children="foo">foo</p>,
       result: '<p>foo</p>'
     },
@@ -111,7 +112,7 @@ describe('SSR Creation (JSX)', () => {
     },
     {
       description: 'Should not render null styles',
-      template: () => <div style={{ 'background-color': null, 'border-bottom-color': null }} />,
+      template: () => <div style={{ 'background-color': null as any, 'border-bottom-color': null as any }} />,
       result: '<div></div>'
     },
     {
@@ -146,22 +147,22 @@ describe('SSR Creation (JSX)', () => {
     },
     {
       description: 'Should not render empty style attribute #3',
-      template: () => <div style={false} />,
+      template: () => <div style={false as any} />,
       result: '<div></div>',
     },
     {
       description: 'Should not render empty style attribute #4',
-      template: () => <div style={0} />,
+      template: () => <div style={0 as any} />,
       result: '<div></div>',
     },
     {
       description: 'Should not render empty style attribute #5',
-      template: () => <div style={true} />,
+      template: () => <div style={true as any} />,
       result: '<div></div>',
     },
     {
       description: 'Should render div className as number',
-      template: () => <div className={123} />,
+      template: () => <div className={123 as any} />,
       result: '<div class="123"></div>'
     },
     {
@@ -217,7 +218,7 @@ describe('SSR Creation (JSX)', () => {
 
   for (const test of testEntries) {
     it(test.description, () => {
-      const vDom = test.template('foo');
+      const vDom = test.template();
       const output = renderToStaticMarkup(vDom);
 
       expect(output).toBe(test.result);
@@ -242,7 +243,7 @@ describe('SSR Creation (JSX)', () => {
         }
 
         render() {
-          return <div>{this.state.foo}</div>;
+          return <div>{this.state!.foo}</div>;
         }
       }
 
@@ -264,7 +265,7 @@ describe('SSR Creation (JSX)', () => {
         render() {
           return (
             <div>
-              {this.state.foo}
+              {this.state!.foo}
               <Another />
             </div>
           );
@@ -299,7 +300,7 @@ describe('SSR Creation (JSX)', () => {
     it('Should render single text node using state', () => {
       class Foobar extends Component {
         render() {
-          return this.state.text;
+          return this.state!.text;
         }
 
         componentWillMount() {
@@ -321,7 +322,7 @@ describe('SSR Creation (JSX)', () => {
     it('Should render single (number)text node using state', () => {
       class Foobar extends Component {
         render() {
-          return this.state.text;
+          return this.state!.text;
         }
 
         componentWillMount() {
@@ -401,6 +402,7 @@ describe('SSR Creation (JSX)', () => {
     it('Should render checked attribute for input when there is no checked in props', () => {
       class Foobar extends Component {
         render() {
+          // @ts-expect-error
           return <input count={1} type="checkbox" defaultChecked={true} />;
         }
       }
@@ -453,7 +455,7 @@ describe('SSR Creation (JSX)', () => {
       container.innerHTML = renderedString;
 
       const AnchorNode = container.querySelector('a');
-      const wrapperDiv = container.firstChild;
+      const wrapperDiv = container.firstChild!;
 
       function WrapperComponent() {
         return (
@@ -549,14 +551,14 @@ describe('SSR Creation (JSX)', () => {
           };
         }
 
-        static getDerivedStateFromProps(props, state) {
+        static getDerivedStateFromProps(_props, state) {
           return {
             value: state.value + 1
           };
         }
 
         render() {
-          return <div>{this.state.value}</div>;
+          return <div>{this.state!.value}</div>;
         }
       }
 
diff --git a/packages/inferno-server/__tests__/hydration-ext.spec.server.jsx b/packages/inferno-server/__tests__/hydration-ext.spec.server.tsx
similarity index 98%
rename from packages/inferno-server/__tests__/hydration-ext.spec.server.jsx
rename to packages/inferno-server/__tests__/hydration-ext.spec.server.tsx
index 5c17d6fe5..3fe9e88c7 100644
--- a/packages/inferno-server/__tests__/hydration-ext.spec.server.jsx
+++ b/packages/inferno-server/__tests__/hydration-ext.spec.server.tsx
@@ -232,7 +232,7 @@ describe('SSR Hydration Extended - (JSX)', () => {
 
     hydrate(vNode, container); // This should create empty text node
 
-    expect(container.firstChild.firstChild).not.toBeNull();
+    expect(container.firstChild?.firstChild).not.toBeNull();
 
     render(<span className="error">{'Okay!'}</span>, container);
 
@@ -252,7 +252,7 @@ describe('SSR Hydration Extended - (JSX)', () => {
 
     hydrate(vNode, container); // This should create empty text node
 
-    expect(container.firstChild.firstChild.firstChild).not.toBeNull();
+    expect(container.firstChild?.firstChild?.firstChild).not.toBeNull();
 
     render(
       <div>
diff --git a/packages/inferno-server/__tests__/hydration.spec.server.js b/packages/inferno-server/__tests__/hydration.spec.server.ts
similarity index 100%
rename from packages/inferno-server/__tests__/hydration.spec.server.js
rename to packages/inferno-server/__tests__/hydration.spec.server.ts
diff --git a/packages/inferno-server/__tests__/hydration.spec.server.jsx b/packages/inferno-server/__tests__/hydration.spec.server.tsx
similarity index 99%
rename from packages/inferno-server/__tests__/hydration.spec.server.jsx
rename to packages/inferno-server/__tests__/hydration.spec.server.tsx
index e0261d450..30b4ef9bb 100644
--- a/packages/inferno-server/__tests__/hydration.spec.server.jsx
+++ b/packages/inferno-server/__tests__/hydration.spec.server.tsx
@@ -454,13 +454,13 @@ describe('SSR Hydration - (JSX)', () => {
 
   it('Should work with setState', () => {
     class Comp3 extends Component {
+      public readonly state = {
+        i: 0
+      }
+
       constructor(props, context) {
         super(props, context);
 
-        this.state = {
-          i: 0
-        };
-
         this.clicker = this.clicker.bind(this);
       }
 
@@ -493,11 +493,11 @@ describe('SSR Hydration - (JSX)', () => {
     hydrate(<Comp3 />, container);
     expect(container.innerHTML).toBe('<div>1<span>1</span></div>');
 
-    container.querySelector('span').click();
+    container.querySelector('span')!.click();
 
     expect(container.innerHTML).toBe('<div>2<span>1</span></div>');
 
-    container.querySelector('span').click();
+    container.querySelector('span')!.click();
 
     expect(container.innerHTML).toBe('<div>3<span>1</span></div>');
 
diff --git a/packages/inferno-server/__tests__/loaderOnRoute.spec.server.jsx b/packages/inferno-server/__tests__/loaderOnRoute.spec.server.tsx
similarity index 87%
rename from packages/inferno-server/__tests__/loaderOnRoute.spec.server.jsx
rename to packages/inferno-server/__tests__/loaderOnRoute.spec.server.tsx
index c19462f9b..39064a7aa 100644
--- a/packages/inferno-server/__tests__/loaderOnRoute.spec.server.jsx
+++ b/packages/inferno-server/__tests__/loaderOnRoute.spec.server.tsx
@@ -22,12 +22,12 @@ describe('Resolve loaders during server side rendering', () => {
     container.innerHTML = '';
     document.body.removeChild(container);
     // Reset history to root
-    history.replaceState(undefined, undefined, '/');
+    history.replaceState(undefined, '', '/');
   });
 
   it('SSR renders same result as browser', async () => {
     const TEXT = 'bubblegum';
-    const Component = (props, { router }) => {
+    const Component = (props) => {
       const res = useLoaderData(props);
       return <h1>{res?.message}</h1>;
     };
@@ -50,13 +50,13 @@ describe('Resolve loaders during server side rendering', () => {
 
     // Render on server
     const html = renderToString(
-      <StaticRouter location="/birds" initialData={initialData}>
+      <StaticRouter context={{}} location="/birds" initialData={initialData}>
         {routes}
       </StaticRouter>,
     );
 
     // Render in browser
-    history.replaceState(undefined, undefined, '/birds');
+    history.replaceState(undefined, '', '/birds');
     render(
       <BrowserRouter initialData={initialData}>{routes}</BrowserRouter>,
       container,
diff --git a/packages/inferno-server/__tests__/observer.spec.server.jsx b/packages/inferno-server/__tests__/observer.spec.server.tsx
similarity index 100%
rename from packages/inferno-server/__tests__/observer.spec.server.jsx
rename to packages/inferno-server/__tests__/observer.spec.server.tsx