diff --git a/package-lock.json b/package-lock.json
index 442d923..6544b40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.10.0",
         "react-scripts": "5.0.1",
+        "react-test-renderer": "^18.2.0",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -15803,6 +15804,36 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/react-shallow-renderer": {
+      "version": "16.15.0",
+      "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
+      "integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-test-renderer": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz",
+      "integrity": "sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==",
+      "dependencies": {
+        "react-is": "^18.2.0",
+        "react-shallow-renderer": "^16.15.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/react-test-renderer/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 778f8b0..9cfd61d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
+    "react-test-renderer": "^18.2.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/tests/Buttons.test.js b/src/tests/Buttons.test.js
new file mode 100644
index 0000000..ddeb926
--- /dev/null
+++ b/src/tests/Buttons.test.js
@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import Buttons from '../components/Buttons';
+
+describe('Buttons are rendered correctly', () => {
+  test('Buttons snapshots match', () => {
+    const tree = renderer.create(<Buttons />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  test('ensure all buttons are rendered', () => {
+    render(<Buttons />);
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBe(19);
+  });
+});
diff --git a/src/tests/DisplayQuote.test.js b/src/tests/DisplayQuote.test.js
new file mode 100644
index 0000000..05e5ec9
--- /dev/null
+++ b/src/tests/DisplayQuote.test.js
@@ -0,0 +1,22 @@
+import {
+  render, screen, act, waitFor,
+} from '@testing-library/react';
+import DisplayQuote from '../components/DisplayQuote';
+
+describe('display quote', () => {
+  test('Should display loading text', async () => {
+    
+    await waitFor(() => {
+        render(<DisplayQuote />)
+      });
+    await waitFor(() => {
+      screen.getByText('Loading ...');
+      
+    });
+  });
+  it('Render correctly', async () => {
+    const quote = await act(async () => render(<DisplayQuote />));
+  
+    expect(quote).toMatchSnapshot();
+  });
+});
diff --git a/src/tests/NavBar.test.js b/src/tests/NavBar.test.js
new file mode 100644
index 0000000..81e0fa7
--- /dev/null
+++ b/src/tests/NavBar.test.js
@@ -0,0 +1,10 @@
+import renderer from 'react-test-renderer';
+import NavBar from '../components/NavBar';
+import { BrowserRouter} from 'react-router-dom';
+
+describe('NavBar', () => {
+  test('Should render elements correctly', () => {
+    const tree = renderer.create(<BrowserRouter><NavBar /></BrowserRouter>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+})
\ No newline at end of file
diff --git a/src/tests/__snapshots__/Buttons.test.js.snap b/src/tests/__snapshots__/Buttons.test.js.snap
new file mode 100644
index 0000000..2a34d90
--- /dev/null
+++ b/src/tests/__snapshots__/Buttons.test.js.snap
@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Buttons are rendered correctly Buttons snapshots match 1`] = `
+Array [
+  <button
+    className="button"
+    type="button"
+  >
+    A/C
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    +/-
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    %
+  </button>,
+  <button
+    className="button operator"
+    type="button"
+  >
+    ÷
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    7
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    8
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    9
+  </button>,
+  <button
+    className="button operator"
+    type="button"
+  >
+    x
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    4
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    5
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    6
+  </button>,
+  <button
+    className="button operator"
+    type="button"
+  >
+    -
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    1
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    2
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    3
+  </button>,
+  <button
+    className="button operator"
+    type="button"
+  >
+    +
+  </button>,
+  <button
+    className="button zero"
+    type="button"
+  >
+    0
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    .
+  </button>,
+  <button
+    className="button operator"
+    type="button"
+  >
+    =
+  </button>,
+]
+`;
diff --git a/src/tests/__snapshots__/DisplayQuote.test.js.snap b/src/tests/__snapshots__/DisplayQuote.test.js.snap
new file mode 100644
index 0000000..3b72191
--- /dev/null
+++ b/src/tests/__snapshots__/DisplayQuote.test.js.snap
@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`display quote Render correctly 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <p
+        class="loading"
+      >
+        Loading ...
+      </p>
+    </div>
+  </body>,
+  "container": <div>
+    <p
+      class="loading"
+    >
+      Loading ...
+    </p>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/tests/__snapshots__/NavBar.test.js.snap b/src/tests/__snapshots__/NavBar.test.js.snap
new file mode 100644
index 0000000..c0dcb87
--- /dev/null
+++ b/src/tests/__snapshots__/NavBar.test.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavBar Should render elements correctly 1`] = `
+<nav
+  className="nav"
+>
+  <h1>
+    Math Magicians
+  </h1>
+  <ul>
+    <li>
+      <a
+        aria-current="page"
+        className="active"
+        href="/"
+        onClick={[Function]}
+      >
+        Home
+      </a>
+    </li>
+    <li>
+      <a
+        className=""
+        href="/calculator"
+        onClick={[Function]}
+      >
+        Calculator
+      </a>
+    </li>
+    <li>
+      <a
+        className=""
+        href="/quote"
+        onClick={[Function]}
+      >
+        Quote
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
diff --git a/src/tests/calculate.test.js b/src/tests/calculate.test.js
new file mode 100644
index 0000000..24c75cb
--- /dev/null
+++ b/src/tests/calculate.test.js
@@ -0,0 +1,25 @@
+import calculate from "../logic/calculate";
+
+describe('calculate', () => {
+    test('equals operator should display result', () => {
+        expect(calculate({ total: 5, next: '3', operation: '+' }, '=')).toEqual({
+          total: '8',
+          next: null,
+          operation: null,
+        });
+      });
+    test('A/C button should clear data displayed', () => {
+      expect(calculate({ total: 5, next: null, operation: '+' }, 'A/C')).toEqual({
+        total: null,
+        next: null,
+        operation: null,
+      });
+    });
+    test('should calculate the correct', () => {
+        expect(calculate({ total: '7', next: '3', operation: 'x' }, '=')).toEqual({
+          total: '21',
+          next: null,
+          operation: null,
+        });
+      });
+})
\ No newline at end of file
diff --git a/src/tests/operate.test.js b/src/tests/operate.test.js
new file mode 100644
index 0000000..e8d8145
--- /dev/null
+++ b/src/tests/operate.test.js
@@ -0,0 +1,10 @@
+import operate from "../logic/operate";
+
+describe('test operate function',()=>{
+    test('should return correct result',()=>{
+        expect(operate(3.5,4.6,'+')).toBe('8.1')
+    })
+    test('should throw an error if number is divide by 0',()=>{
+        expect(operate(2,0,'÷')).toBe("Can't divide by 0.")
+    })
+})
\ No newline at end of file