Change react integration test to TS

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.js → 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.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",
+    ]
+  }