added jest test suite and ts supp:

packages/react/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

packages/react/jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  preset: 'ts-jest',
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': '<rootDir>/__mocks__/styleMock.js',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(js|jsx)$': 'babel-jest',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+
+  // Test file patterns to match
+  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+};

packages/react/jest.setup.ts

@@ -0,0 +1,2 @@
+// jest.setup.ts
+import '@testing-library/jest-dom';

packages/react/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "storybook": "storybook dev -p 3000",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "jest"
   },
   "browserslist": {
     "production": [
@@ -22,19 +23,21 @@
     "@carbon/react": "^1.71.1",
     "@carbon/styles": "^1.70.0",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.121",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "jest": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.2.2"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@chromatic-com/storybook": "^3.2.2",
     "@storybook/addon-docs": "^8.4.6",
     "@storybook/addon-essentials": "^8.4.6",
@@ -50,6 +53,7 @@
     "@types/prop-types": "^15",
     "css-loader": "^7.1.2",
     "eslint-plugin-storybook": "^0.11.1",
+    "jest-environment-jsdom": "^29.7.0",
     "mini-css-extract-plugin": "^2.9.2",
     "postcss-loader": "^8.1.1",
     "prop-types": "^15.8.1",
@@ -58,6 +62,7 @@
     "storybook": "^8.4.6",
     "storybook-addon-accessibility-checker": "^3.1.61-rc.3",
     "style-loader": "^4.0.0",
+    "ts-jest": "^29.2.5",
     "typescript-config-carbon": "^0.3.0",
     "webpack": "^5.97.0"
   }

packages/react/src/components/ExampleButton/__tests__/ExampleButton-test.js

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import '@testing-library/jest-dom';
+
+import { ExampleButton } from '../components/ExampleButton';
+jest.mock('./button.scss', () => ({}));
+describe('ExampleButton', () => {
+  describe('renders as expected - Component API', () => {
+    it('renders a button element', () => {
+      render(<ExampleButton />);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('renders with default text "Button"', () => {
+      render(<ExampleButton />);
+      expect(screen.getByRole('button')).toHaveTextContent(/^Button$/);
+    });
+
+    it('supports a custom class name', () => {
+      const { container } = render(<ExampleButton className="test" />);
+      expect(container.firstChild).toHaveClass('test');
+    });
+
+    it('supports additional props', () => {
+      render(<ExampleButton data-testid="test-button" />);
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'data-testid',
+        'test-button'
+      );
+    });
+
+    it('supports disabled state', () => {
+      render(<ExampleButton disabled />);
+      expect(screen.getByRole('button')).toBeDisabled();
+    });
+  });
+
+  describe('behaves as expected', () => {
+    it('calls onClick handler when clicked', async () => {
+      const onClick = jest.fn();
+      render(<ExampleButton onClick={onClick} />);
+
+      expect(onClick).toHaveBeenCalledTimes(0);
+      await userEvent.click(screen.getByRole('button'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

packages/react/src/components/ExampleButton/components/ExampleButton.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
-import { Button } from '@carbon/react';
+import React, { PropsWithChildren } from 'react';
+import { Button, ButtonProps } from '@carbon/react';
 import './button.scss';
 
 /** Primary UI component for user interaction */
-export const ExampleButton = () => {
-  return <Button>Button</Button>;
-};
+
+type ExampleButtonProps = PropsWithChildren<ButtonProps<any>>;
+export const ExampleButton = ({ children = 'Button', ...rest }: ExampleButtonProps ) => {
+  return <Button {...rest}>{children}</Button>;
+};

packages/react/tsconfig.json

@@ -4,6 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
+    "types": ["jest", "@testing-library/jest-dom"],
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
@@ -16,5 +17,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": ["src", "__tests__/**/*"]
 }