add jest rtl configs

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": [ "@wordpress/babel-preset-default" ]
+}

.gitignore

@@ -1,4 +1,4 @@
 node_modules
 build
 vendor
-
+yarn-error.log

jest-setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	setupFilesAfterEnv: ['./jest-setup.js'],
+	moduleNameMapper: {
+		'@wordpress/(.*)$': '<rootDir>/node_modules/@wordpress/$1',
+	},
+};

package.json

@@ -5,9 +5,16 @@
   "scripts": {
     "start": "wp-scripts start",
     "build": "wp-scripts build",
-    "lint:js": "wp-scripts lint-js"
+    "lint:js": "wp-scripts lint-js",
+    "test": "wp-scripts test-unit-js",
+    "test:watch": "wp-scripts test-unit-js --watch"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "12.1.2",
+    "@types/jest": "^29.5.0",
+    "@types/react-syntax-highlighter": "^15.5.6",
+    "@types/wordpress__components": "^23.0.1",
     "@wordpress/eslint-plugin": "^12.0.1",
     "@wordpress/scripts": "^19.2.2",
     "eslint": "^7.18.0",
@@ -20,15 +27,20 @@
   "author": "Mohan Raj <https://mohanraj.dev>",
   "license": "ISC",
   "dependencies": {
-    "@types/react-syntax-highlighter": "^15.5.6",
-    "@types/wordpress__components": "^23.0.1",
     "@wordpress/api-fetch": "^6.26.0",
     "@wordpress/components": "^23.6.0",
     "@wordpress/data": "^8.6.0",
     "@wordpress/i18n": "^4.29.0",
     "@wordpress/notices": "^3.29.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-syntax-highlighter": "^15.5.0",
+    "react-test-renderer": "^18.2.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.2"
+  },
+  "jest": {
+    "preset": "@wordpress/jest-preset-default",
+    "verbose": true
   }
 }

src/components/SdkModal.tsx

@@ -14,8 +14,8 @@ const SdkModal = ({ item, closeSdkModal }: SdkModalProps): JSX.Element => {
 	const [hasPhpCopied, setHasPhpCopied] = useState(false);
 
 	useEffect(() => {
-		let jsTimeout: number | null = null;
-		let phpTimeout: number | null = null;
+		let jsTimeout: NodeJS.Timeout | null = null;
+		let phpTimeout: NodeJS.Timeout | null = null;
 
 		if (hasJsCopied) {
 			jsTimeout = setTimeout(() => {

src/components/__tests__/DeleteModal.test.js

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import DeleteModal from '../DeleteModal';
+
+jest.mock('@wordpress/components', () => ({
+	...jest.requireActual('@wordpress/components'),
+	Modal: jest
+		.fn()
+		.mockImplementation(({ children }) => <div>{children}</div>),
+	Button: jest
+		.fn()
+		.mockImplementation(({ children }) => <div>{children}</div>),
+}));
+
+describe('DeleteModal component', () => {
+	it('should display given `flag name` in the modal', () => {
+		const flag = { name: 'Test' };
+		render(<DeleteModal item={flag} />);
+
+		const modalText = screen.getByText(
+			`Are you sure want to delete flag "${flag.name}"?`
+		);
+		expect(modalText).toBeInTheDocument();
+	});
+});

src/components/__tests__/Header.test.js

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import Header from '../Header';
+
+jest.mock('@wordpress/components', () => ({
+	...jest.requireActual('@wordpress/components'),
+	Flex: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
+	FlexItem: jest
+		.fn()
+		.mockImplementation(({ children }) => <div>{children}</div>),
+}));
+
+describe('Header component', () => {
+	it('renders component with all header fields', () => {
+		render(<Header />);
+		const flagName = screen.getByText('Flag Name');
+		expect(flagName).toBeInTheDocument();
+
+		const status = screen.getByText('Status');
+		expect(status).toBeInTheDocument();
+
+		const sdk = screen.getByText('SDK Settings');
+		expect(sdk).toBeInTheDocument();
+
+		const deleteFlag = screen.getByText('Delete Flag');
+		expect(deleteFlag).toBeInTheDocument();
+	});
+});

tsconfig.json

@@ -26,7 +26,8 @@
       "allowSyntheticDefaultImports": true,
       "forceConsistentCasingInFileNames": true,
       "isolatedModules": true,
-      "typeRoots": ["./types"]
+      "typeRoots": ["./types"],
+      "types": ["jest","node", "@types/jest"]
     },
-    "include": [ "src", "types/window.d.ts" ],
+    "include": [ "src", "types/window.d.ts"],
   }