diff --git a/.eslintignore b/.eslintignore
index a261f291755..15caa4d6118 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +1,2 @@
dist/*
+test/integration/react-browser/*
diff --git a/test/integration/integration-test.cjs b/test/integration/integration-test.cjs
index 1d841cc6a18..560cde977c6 100644
--- a/test/integration/integration-test.cjs
+++ b/test/integration/integration-test.cjs
@@ -7,6 +7,11 @@ const childProcess = require('child_process');
const {describe, it} = require('mocha');
+const platforms = [
+ 'node',
+ 'react-browser'
+];
+
function exec(command, options = {}) {
const output = childProcess.execSync(command, {
encoding: 'utf-8',
@@ -27,7 +32,7 @@ describe('Integration Tests', () => {
path.join(tmpDir, 'package.tgz'),
);
- function testOnNodeProject(projectName) {
+ function testProjectOnPlatform(projectName) {
const projectPath = path.join(__dirname, projectName);
const packageJSONPath = path.join(projectPath, 'package.json');
@@ -42,5 +47,7 @@ describe('Integration Tests', () => {
}).timeout(5 * 60 * 1000);
}
- testOnNodeProject('node');
+ for (const platform of platforms) {
+ testProjectOnPlatform(platform)
+ }
});
diff --git a/test/integration/react-browser/package.json b/test/integration/react-browser/package.json
new file mode 100644
index 00000000000..b8a131f4d6a
--- /dev/null
+++ b/test/integration/react-browser/package.json
@@ -0,0 +1,26 @@
+{
+ "private": true,
+ "description": "chart.js should work in react-browser (Web)",
+ "dependencies": {
+ "chart.js": "file:../package.tgz",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-scripts": "5.0.1",
+ "web-vitals": "^2.1.4"
+ },
+ "scripts": {
+ "test": "react-scripts build"
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ }
+}
diff --git a/test/integration/react-browser/public/index.html b/test/integration/react-browser/public/index.html
new file mode 100644
index 00000000000..3051d247d8e
--- /dev/null
+++ b/test/integration/react-browser/public/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+ Chartjs test React App
+
+
+
+
+
+
+
diff --git a/test/integration/react-browser/src/App.js b/test/integration/react-browser/src/App.js
new file mode 100644
index 00000000000..3f27816ac90
--- /dev/null
+++ b/test/integration/react-browser/src/App.js
@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import {Chart, DoughnutController, ArcElement} from 'chart.js';
+import {merge} from 'chart.js/helpers';
+
+Chart.register(DoughnutController, ArcElement);
+
+function App() {
+ useEffect(() => {
+ const c = Chart.getChart('myChart');
+ if(c) c.destroy();
+
+ new Chart('myChart', {
+ type: 'doughnut',
+ data: {
+ labels: ['Chart', 'JS'],
+ datasets: [{
+ data: [2, 3]
+ }]
+ }
+ })
+ }, [])
+
+ return (
+
+
+
+ );
+}
+
+export default App;
diff --git a/test/integration/react-browser/src/index.js b/test/integration/react-browser/src/index.js
new file mode 100644
index 00000000000..593edf12164
--- /dev/null
+++ b/test/integration/react-browser/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+
+
+
+);