Chart Library: Add initial testing infrastructure and PieChart component tests (#41148)

* Add dependencies for testing

* set up config for tests

* create testing file for pie chart with a few edge case tests

* mock the ResizeObserver

* changelog

* simplify pie chart tests for initial setup

* update dir from __tests__ to test

* add back in src/* for typeRoots in tsconfig

Author: annacmc

pnpm-lock.yaml

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Charts: adds dependencies and config for jest testing. Adds some initial tests to pie chart component

projects/js-packages/charts/changelog/add-chart-library-tests

@@ -0,0 +1,14 @@
+/// <reference types="jest" />
+
+declare global {
+	const describe: jest.Describe;
+	const test: jest.It;
+	const expect: jest.Expect;
+	const it: jest.It;
+	const beforeAll: jest.Lifecycle;
+	const afterAll: jest.Lifecycle;
+	const beforeEach: jest.Lifecycle;
+	const afterEach: jest.Lifecycle;
+}
+
+export {};

projects/js-packages/charts/global.d.ts

@@ -92,7 +92,17 @@
 		"tsconfig-paths-webpack-plugin": "4.2.0",
 		"typescript": "5.7.2",
 		"webpack": "^5.88.0",
-		"webpack-cli": "^5.1.0"
+		"webpack-cli": "^5.1.0",
+		"@testing-library/react": "^14.0.0",
+		"@testing-library/jest-dom": "^6.0.0",
+		"@types/jest": "^29.0.0",
+		"@types/testing-library__jest-dom": "^5.14.9",
+		"@jest/globals": "^29.0.0",
+		"babel-jest": "^29.7.0",
+		"@automattic/jetpack-webpack-config": "workspace:*",
+		"@wordpress/babel-plugin-import-jsx-pragma": "5.14.0",
+		"@wordpress/element": "6.14.0",
+		"@babel/plugin-transform-react-jsx": "7.25.9"
 	},
 	"peerDependencies": {
 		"react": "^17.0.0 || ^18.0.0",

projects/js-packages/charts/package.json

@@ -0,0 +1,18 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import { ThemeProvider } from '../../../providers/theme';
+import PieChart from '../pie-chart';
+
+describe( 'PieChart', () => {
+	it( 'renders', () => {
+		const { container } = render(
+			<ThemeProvider>
+				<PieChart data={ [ { label: 'A', percentage: 100, value: 100 } ] } />
+			</ThemeProvider>
+		);
+		expect( container ).toBeTruthy();
+	} );
+} );

projects/js-packages/charts/src/components/pie-chart/test/pie-chart.test.tsx

@@ -4,4 +4,16 @@ const baseConfig = require( 'jetpack-js-tools/jest/config.base.js' );
 module.exports = {
 	...baseConfig,
 	rootDir: path.join( __dirname, '..' ),
+	testEnvironment: 'jsdom',
+	setupFilesAfterEnv: [
+		...baseConfig.setupFilesAfterEnv,
+		'@testing-library/jest-dom',
+		'<rootDir>/tests/jest.setup.js',
+	],
+	transform: {
+		...baseConfig.transform,
+		'\\.[jt]sx?$': require( 'jetpack-js-tools/jest/babel-jest-config-factory.js' )(
+			require.resolve
+		),
+	},
 };

projects/js-packages/charts/tests/jest.config.cjs

@@ -0,0 +1,13 @@
+class ResizeObserver {
+	observe() {
+		// do nothing
+	}
+	unobserve() {
+		// do nothing
+	}
+	disconnect() {
+		// do nothing
+	}
+}
+
+global.ResizeObserver = ResizeObserver;