Change react integration test to TS (#10605)

* switch to ts

* change web integration test to TS

* remove space

* lint things

* one more lint

* Add spaces

test/integration/node/package-lock.json

@@ -1,24 +0,0 @@
-{
-  "name": "node",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "chart.js": "^3.8.2"
-      }
-    },
-    "node_modules/chart.js": {
-      "version": "3.8.2",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.8.2.tgz",
-      "integrity": "sha512-7rqSlHWMUKFyBDOJvmFGW2lxULtcwaPLegDjX/Nu5j6QybY+GCiQkEY+6cqHw62S5tcwXMD8Y+H5OBGoR7d+ZQ=="
-    }
-  },
-  "dependencies": {
-    "chart.js": {
-      "version": "3.8.2",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.8.2.tgz",
-      "integrity": "sha512-7rqSlHWMUKFyBDOJvmFGW2lxULtcwaPLegDjX/Nu5j6QybY+GCiQkEY+6cqHw62S5tcwXMD8Y+H5OBGoR7d+ZQ=="
-    }
-  }
-}

test/integration/react-browser/package.json

@@ -3,9 +3,13 @@
   "description": "chart.js should work in react-browser (Web)",
   "dependencies": {
     "chart.js": "file:../package.tgz",
+    "@types/node": "^18.7.6",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

test/integration/react-browser/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import React, {useEffect} from 'react';
 import {Chart, DoughnutController, ArcElement} from 'chart.js';
 import {merge} from 'chart.js/helpers';
 
@@ -7,7 +7,9 @@ Chart.register(DoughnutController, ArcElement);
 function App() {
   useEffect(() => {
     const c = Chart.getChart('myChart');
-    if(c) c.destroy();
+    if (c) {
+      c.destroy();
+    }
 
     new Chart('myChart', {
       type: 'doughnut',
@@ -17,8 +19,8 @@ function App() {
           data: [2, 3]
         }]
       }
-    })
-  }, [])
+    });
+  }, []);
 
   return (
     <div className="App">

test/integration/react-browser/src/AppAuto.tsx

@@ -0,0 +1,30 @@
+import React, {useEffect} from 'react';
+import Chart from 'chart.js/auto';
+import {merge} from 'chart.js/helpers';
+
+function AppAuto() {
+  useEffect(() => {
+    const c = Chart.getChart('myChart');
+    if (c) { 
+      c.destroy();
+    }
+
+    new Chart('myChart', {
+      type: 'doughnut',
+      data: {
+        labels: ['Chart', 'JS'],
+        datasets: [{
+          data: [2, 3]
+        }]
+      }
+    });
+  }, []);
+
+  return (
+    <div className="App">
+      <canvas id="myChart"></canvas>
+    </div>
+  );
+}
+
+export default AppAuto;

test/integration/react-browser/src/index.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

test/integration/react-browser/src/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {render} from 'react-dom';
+import App from './App';
+import AppAuto from './AppAuto';
+
+render(
+  <React.StrictMode>
+    <App />
+    <AppAuto />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

test/integration/react-browser/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+      "jsx": "react",
+      "target": "ES6",
+      "moduleResolution": "Node",
+      "allowSyntheticDefaultImports": true,
+      "alwaysStrict": true,
+      "strict": true,
+      "noEmit": true
+    },
+    "include": [
+      "./**/*.tsx",
+    ]
+  }