Add React Testing Library to the Woo AI plugin. (#42993)

* Add React Testing Library and the simplest of tests to verify tests can be run successfully.

plugins/woo-ai/babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+	presets: [
+		[
+			'@wordpress/babel-preset-default',
+			{
+				targets: {
+					node: 'current',
+				},
+			},
+		],
+		[ '@babel/preset-typescript' ],
+	],
+};

plugins/woo-ai/changelog/try-woo-ai-rtl

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add React Testing Library and a basic test to the Woo AI plugin.

plugins/woo-ai/package.json

@@ -11,11 +11,18 @@
 	"version": "0.5.0",
 	"homepage": "http://github.com/woocommerce/woo-ai",
 	"devDependencies": {
+		"@babel/preset-react": "7.23.3",
 		"@svgr/webpack": "^8.1.0",
+		"@testing-library/react": "12.1.5",
+		"@testing-library/dom": "9.3.3",
+		"@testing-library/jest-dom": "5.16.5",
+		"@testing-library/react-hooks": "7.0.2",
+		"@testing-library/user-event": "13.5.0",
 		"@types/debug": "^4.1.12",
 		"@types/jquery": "^3.5.29",
 		"@types/react": "^17.0.71",
 		"@types/react-dom": "^17.0.25",
+		"@babel/preset-typescript": "7.23.2",
 		"@types/wordpress__components": "^19.10.5",
 		"@woocommerce/dependency-extraction-webpack-plugin": "workspace:*",
 		"@woocommerce/eslint-plugin": "workspace:*",
@@ -23,6 +30,7 @@
 		"@wordpress/env": "^8.13.0",
 		"@wordpress/prettier-config": "2.17.0",
 		"@wordpress/scripts": "^19.2.4",
+		"babel-jest": "~27.5.1",
 		"eslint": "^8.55.0",
 		"prettier": "npm:wp-prettier@^2.8.5",
 		"ts-loader": "^9.5.1",
@@ -50,7 +58,7 @@
 		"packages-update": "wp-scripts packages-update",
 		"start": "wp-scripts start",
 		"test:e2e": "wp-scripts test-e2e",
-		"test:unit": "wp-scripts test-unit-js",
+		"test:unit": "wp-scripts test-unit-js --config tests/js/jest.config.js",
 		"uglify": "rm -f $npm_package_assets_js_min && for f in $npm_package_assets_js_js; do file=${f%.js}; node_modules/.bin/uglifyjs $f -c -m > $file.min.js; done"
 	},
 	"dependencies": {
@@ -75,8 +83,6 @@
 		"react-query": "^3.39.3"
 	},
 	"peerDependencies": {
-		"@types/react": "^17.0.71",
-		"@types/react-dom": "^17.0.25",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2"
 	},

plugins/woo-ai/src/components/magic-button/magic-button.test.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { MagicButton } from './magic-button';
+
+describe( 'MagicButton', () => {
+	it( 'renders correctly', () => {
+		const { getByText } = render(
+			<MagicButton onClick={ () => {} } label="Test Button" />
+		);
+
+		expect( getByText( 'Test Button' ) ).toBeInTheDocument();
+	} );
+
+	it( 'calls onClick prop when clicked', () => {
+		const handleClick = jest.fn();
+
+		const { getByText } = render(
+			<MagicButton onClick={ handleClick } label="Test Button" />
+		);
+
+		fireEvent.click( getByText( 'Test Button' ) );
+
+		expect( handleClick ).toHaveBeenCalledTimes( 1 );
+	} );
+} );

plugins/woo-ai/tests/js/jest-file-mock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

plugins/woo-ai/tests/js/jest-setup.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import '@testing-library/jest-dom';
+
+beforeEach( () => {
+	// Mock fetch
+	global.fetch = jest.fn( () =>
+		Promise.resolve( {
+			json: () => Promise.resolve( {} ),
+		} )
+	);
+} );
+
+afterEach( () => {
+	jest.clearAllTimers();
+} );
+
+global.ResizeObserver = require( 'resize-observer-polyfill' );

plugins/woo-ai/tests/js/jest.config.js

@@ -0,0 +1,38 @@
+module.exports = {
+	preset: '@wordpress/jest-preset-default',
+	rootDir: '../../',
+	verbose: true,
+	moduleDirectories: [ 'node_modules', '<rootDir>/src' ],
+	restoreMocks: true,
+	transform: {
+		'^.+\\.jsx?$': 'babel-jest',
+	},
+	moduleNameMapper: {
+		'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+			'<rootDir>/tests/js/jest-file-mock.js',
+		'^react$': '<rootDir>/node_modules/react',
+		'^react-dom$': '<rootDir>/node_modules/react-dom',
+	},
+	testPathIgnorePatterns: [
+		'/node_modules/',
+		'<rootDir>/build/',
+		'<rootDir>/.*/build/',
+		'<rootDir>/tests',
+	],
+	transformIgnorePatterns: [
+		'node_modules/?!(simple-html-tokenizer|is-plain-obj|is-plain-object|memize)',
+	],
+	testEnvironment: 'jsdom',
+
+	setupFiles: [
+		require.resolve(
+			'@wordpress/jest-preset-default/scripts/setup-globals.js'
+		),
+	],
+	setupFilesAfterEnv: [
+		require.resolve(
+			'@wordpress/jest-preset-default/scripts/setup-test-framework.js'
+		),
+		'<rootDir>/tests/js/jest-setup.js',
+	],
+};

plugins/woo-ai/tests/js/jestPreprocess.js

@@ -0,0 +1,10 @@
+const babelOptions = {
+	presets: [ '@babel/preset-typescript', '@wordpress/babel-preset-default' ],
+	plugins: [
+		'explicit-exports-references',
+		'@babel/plugin-proposal-class-properties',
+	],
+};
+
+module.exports =
+	require( 'babel-jest' ).default.createTransformer( babelOptions );