diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js
new file mode 100644
index 0000000..a099545
--- /dev/null
+++ b/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
\ No newline at end of file
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..9371a67
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "testMatch": [
+      "**/__tests__/**/*.+(ts|tsx|js)",
+      "**/?(*.)+(spec|test).+(ts|tsx|js)"
+    ],
+    "transform": {
+      "^.+\\.(ts|tsx)$": "ts-jest"
+    },
+    "moduleNameMapper": {
+        '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
+      },
+      "testEnvironment": "jsdom"
+  }
\ No newline at end of file
diff --git a/package.json b/package.json
index 44eb7a8..b61e710 100644
--- a/package.json
+++ b/package.json
@@ -6,14 +6,16 @@
     "dev": "ts-node src/index.tsx",
     "clean": "rimraf node_modules && rimraf package-lock.json",
     "start": "cross-env react-scripts start",
-    "build": "cross-env react-scripts build"
+    "build": "cross-env react-scripts build",
+    "test": "jest"
   },
   "dependencies": {
     "@pieces.app/pieces-os-client": "1.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "ts-node": "^10.9.1"
+    "ts-node": "^10.9.1",
+    "jest-environment-jsdom": "^29.7.0"
   },
   "devDependencies": {
     "@types/node": "^20.8.7",
@@ -21,7 +23,12 @@
     "@types/react-dom": "^18.2.17",
     "cross-env": "^7.0.3",
     "rimraf": "^3.0.2",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.11",
+    "jest": "^29.7.0",
+    "ts-jest": "^29.1.1"
   },
   "browserslist": {
     "production": [
diff --git a/src/app/components/Button/__tests__/button.test.tsx b/src/app/components/Button/__tests__/button.test.tsx
new file mode 100644
index 0000000..16102d1
--- /dev/null
+++ b/src/app/components/Button/__tests__/button.test.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CreateButton } from '../Button';
+import '@testing-library/jest-dom'
+
+describe('CreateButton', () => {
+  it('should have "Create Snippet" as button label', () => {
+    render(<CreateButton applicationData={null} data={null} name={null} />);
+    const buttonElement = screen.getByRole('button', { name: /Create Snippet/i });
+    expect(buttonElement).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/src/app/components/Copilot/Copilot.tsx b/src/app/components/Copilot/Copilot.tsx
index 6ae9967..0759288 100644
--- a/src/app/components/Copilot/Copilot.tsx
+++ b/src/app/components/Copilot/Copilot.tsx
@@ -134,7 +134,7 @@ export function CopilotChat(): React.JSX.Element {
     setMessage("")
     setData("")
   };
-
+    
   // for setting the initial copilot chat that takes place on page load.
   useEffect(() => {
     const getInitialChat = async () => {
diff --git a/src/app/components/TextInput/__tests__/textinput.test.tsx b/src/app/components/TextInput/__tests__/textinput.test.tsx
new file mode 100644
index 0000000..76e8ddb
--- /dev/null
+++ b/src/app/components/TextInput/__tests__/textinput.test.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DataTextInput } from '../TextInput';
+import '@testing-library/jest-dom';
+
+describe('DataTextInput', () => {
+  test('renders input and textarea elements', () => {
+    render(<DataTextInput applicationData={null} />);
+
+    const nameInput = screen.getByPlaceholderText('Type the name of your snippet...') as HTMLInputElement;
+    const dataTextarea = screen.getByPlaceholderText('Add your code/text content into this box') as HTMLTextAreaElement;
+
+    expect(nameInput).toBeInTheDocument();
+    expect(dataTextarea).toBeInTheDocument();
+  });
+
+  test('updates the state when input and textarea values change', () => {
+    render(<DataTextInput applicationData={null} />);
+
+    const nameInput = screen.getByPlaceholderText('Type the name of your snippet...') as HTMLInputElement;
+    const dataTextarea = screen.getByPlaceholderText('Add your code/text content into this box') as HTMLTextAreaElement;
+
+    // Simulate user input and check if the state is updated accordingly
+    expect(nameInput.value).toEqual('');
+    fireEvent.change(nameInput, { target: { value: 'Snippet name' } });
+    expect(nameInput.value).toEqual('Snippet name');
+
+    expect(dataTextarea.value).toEqual('');
+    fireEvent.change(dataTextarea, { target: { value: 'Snippet code' } });
+    expect(dataTextarea.value).toEqual('Snippet code');
+  });
+});
+
+
+
diff --git a/tsconfig.json b/tsconfig.json
index 2b4156e..8b24d7b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,16 +1,17 @@
 {
   "compilerOptions": {
-    "target": "es2020",
+    "target": "es2022",
     "module": "CommonJS",
-     "allowJs": true,
-     "checkJs": true,
+    "allowJs": true,
+    "checkJs": true,
+    "types": ["@testing-library/jest-dom"],
     "forceConsistentCasingInFileNames": true,
-
+    "outDir": "./dist",
     /* Type Checking */
     "strict": false,
     "skipLibCheck": true,
     /* Skip type checking all .d.ts files. */
     "jsx": "react"
   },
-  "exclude": ["node_modules"]
-}
+  "exclude": ["node_modules","jest.config.js", "**/__mocks__/*"]
+}
\ No newline at end of file