diff --git a/webapp/src/components/About/AboutUs.test.tsx b/webapp/src/components/About/AboutUs.test.tsx
new file mode 100644
index 0000000..d439b1b
--- /dev/null
+++ b/webapp/src/components/About/AboutUs.test.tsx
@@ -0,0 +1,12 @@
+import AboutUs from "./AboutUs";
+import { render, screen} from "@testing-library/react";
+
+
+test('Check that everything is properly rendered', async () => {
+    render(<AboutUs/>);
+    expect(screen.getByText("About us")).toBeInTheDocument();
+    expect(screen.getByText("Developer team")).toBeInTheDocument();
+    expect(screen.getByText("Diego Martín Fernández")).toBeInTheDocument();
+    expect(screen.getByText("Laura Pernía Blanco")).toBeInTheDocument();
+    expect(screen.getByText("Stelian Adrian Stanci")).toBeInTheDocument();
+});
\ No newline at end of file
diff --git a/webapp/src/components/Footer/Footer.test.tsx b/webapp/src/components/Footer/Footer.test.tsx
new file mode 100644
index 0000000..8f0bc27
--- /dev/null
+++ b/webapp/src/components/Footer/Footer.test.tsx
@@ -0,0 +1,17 @@
+import {fireEvent, render, screen} from "@testing-library/react";
+import App from "../../App"
+
+test('Check that everything in the footer is rendered', async () => {
+    render(<App/>);
+    expect(screen.getByText("Code")).toBeInTheDocument();
+    expect(screen.getByText("Documentation")).toBeInTheDocument();
+    expect(screen.getByText("About Us")).toBeInTheDocument();
+    expect(screen.getByText("SOLID")).toBeInTheDocument();
+});
+
+test('Check that About Us link works at takes the user to About us page', async () => {
+    render(<App/>);
+    let aboutUs = screen.getByTestId("aboutUsLink");
+    fireEvent.click(aboutUs);
+    expect(screen.getByText("Developer team")).toBeInTheDocument();
+});
\ No newline at end of file
diff --git a/webapp/src/components/Footer/Footer.tsx b/webapp/src/components/Footer/Footer.tsx
index 0cd7544..b6cc36c 100644
--- a/webapp/src/components/Footer/Footer.tsx
+++ b/webapp/src/components/Footer/Footer.tsx
@@ -69,7 +69,7 @@ const Footer = () => {
                     </Column>
                     <Column>
                         <Link to="/about">
-                        <FooterLink>About Us</FooterLink>
+                        <FooterLink data-testid="aboutUsLink">About Us</FooterLink>
                         </Link>
                     </Column>
                     <Column>
diff --git a/webapp/src/components/ListProducts.test.tsx b/webapp/src/components/ListProducts.test.tsx
new file mode 100644
index 0000000..c6dd2a8
--- /dev/null
+++ b/webapp/src/components/ListProducts.test.tsx
@@ -0,0 +1,21 @@
+import {ProductType} from "../shared/shareddtypes";
+import ListProducts from "./ListProducts";
+import {render, screen, waitForElementToBeRemoved} from "@testing-library/react";
+
+const testProductList:ProductType[] = [{id:1, name:"Watermelon", category:"Fruit", price:3.45,
+    image:"https://images.unsplash.com/photo-1629084092232-b7b3fa74cd4b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80",
+    description: "Rica sandia" },
+    {id:2, name:"Salmon", category:"Fish", price:5.55,
+        image:"https://images.unsplash.com/photo-1499125562588-29fb8a56b5d5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80",
+        description: "Salmon description" }
+];
+
+test("Check that products are correctly rendered", async () => {
+    ///////// We need to change the implementation of ListProduct
+    //jest.spyOn(api, "useFetch").mockReturnValue(Promise.resolve(testProductList));
+    //render(<ListProducts/>)
+
+    //await waitForElementToBeRemoved(() => screen.getByTestId('loadingProduct'));
+    //expect(screen.getByText("Watermelon - 3.45€")).toBeInTheDocument();
+    //expect(screen.getByText("Rica sandia")).toBeInTheDocument();
+});
\ No newline at end of file
diff --git a/webapp/src/components/PastOrders/OrderDetailProduct.test.tsx b/webapp/src/components/PastOrders/OrderDetailProduct.test.tsx
new file mode 100644
index 0000000..65bd995
--- /dev/null
+++ b/webapp/src/components/PastOrders/OrderDetailProduct.test.tsx
@@ -0,0 +1,21 @@
+import OrderDetailProduct from "./OrderDetailProduct";
+import { render, screen} from "@testing-library/react";
+import {OrderProduct, ProductType} from "../../shared/shareddtypes";
+
+const testProduct:ProductType = {id:1, name:"Watermelon", category:"Fruit", price:1.25,
+    image:"https://images.unsplash.com/photo-1629084092232-b7b3fa74cd4b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80",
+    description: "Rica sandia" };
+
+const testOrderProduct:OrderProduct = {id:1, quantity:2, price:1.25, product:testProduct, order:undefined!};
+
+test('Check that order product is properly rendered and total', async () => {
+    render(<OrderDetailProduct item={testOrderProduct}/>);
+    expect(screen.getByText(testProduct.name)).toBeInTheDocument();
+    expect(screen.getByText("Units: " + testOrderProduct.quantity)).toBeInTheDocument();
+    expect(screen.getByText(testOrderProduct.price + "€")).toBeInTheDocument();
+});
+
+test('Check that subtotal of this product is correctly calculated', async () => {
+    render(<OrderDetailProduct item={testOrderProduct}/>);
+    expect(screen.getByText(testOrderProduct.price * testOrderProduct.quantity + "€")).toBeInTheDocument();
+});
\ No newline at end of file
diff --git a/webapp/src/components/ProductDetail.test.tsx b/webapp/src/components/ProductDetail.test.tsx
new file mode 100644
index 0000000..4e1b8c0
--- /dev/null
+++ b/webapp/src/components/ProductDetail.test.tsx
@@ -0,0 +1,32 @@
+import * as api from "../api/api";
+import {ProductType, RatingType} from "../shared/shareddtypes";
+import ProductDetail from "./ProductDetail";
+import {render, screen, waitForElementToBeRemoved} from "@testing-library/react";
+
+const testProduct:ProductType = {id:1, name:"Watermelon", category:"Fruit", price:3.45,
+    image:"https://images.unsplash.com/photo-1629084092232-b7b3fa74cd4b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80",
+    description: "Rica sandia" };
+
+const testRating:RatingType[] = [{user:"WatermelonLover", comment:"Nice watermelon", rating:0.9, product:testProduct},
+    {user:"Laura", comment:"Bad watermelon", rating:0.1, product:testProduct}]
+
+test("Check that the details view of a product is renderer properly", async () => {
+    jest.spyOn(api, "getProductById").mockReturnValue(Promise.resolve(testProduct));
+    render(<ProductDetail/>)
+
+    await waitForElementToBeRemoved(() => screen.getByTestId('loadingProduct'));
+    expect(screen.getByText("Watermelon - 3.45€")).toBeInTheDocument();
+    expect(screen.getByText("Rica sandia")).toBeInTheDocument();
+});
+
+test("Check that reviews of a product are rendered correctly", async () => {
+    jest.spyOn(api, "getProductById").mockReturnValue(Promise.resolve(testProduct));
+    jest.spyOn(api, "getRatingsForProduct").mockReturnValue(Promise.resolve(testRating));
+    render(<ProductDetail/>)
+
+    await waitForElementToBeRemoved(() => screen.getByTestId('loadingProduct'));
+    expect(screen.getByText("Nice watermelon")).toBeInTheDocument();
+    expect(screen.getByText("WatermelonLover")).toBeInTheDocument();
+    expect(screen.getByText("Bad watermelon")).toBeInTheDocument();
+    expect(screen.getByText("Laura")).toBeInTheDocument();
+});
diff --git a/webapp/src/components/ProductDetail.tsx b/webapp/src/components/ProductDetail.tsx
index eb23c5c..8a58c80 100644
--- a/webapp/src/components/ProductDetail.tsx
+++ b/webapp/src/components/ProductDetail.tsx
@@ -157,7 +157,7 @@ const ProductDetails = () => {
             </div>
         );
     } else {
-        return <h1> No product could be loaded :( </h1>;
+        return <h1 data-testid="loadingProduct"> No product could be loaded :( </h1>;
     }
 };
 
diff --git a/webapp/src/shared/shareddtypes.ts b/webapp/src/shared/shareddtypes.ts
index c9c465e..989df86 100644
--- a/webapp/src/shared/shareddtypes.ts
+++ b/webapp/src/shared/shareddtypes.ts
@@ -50,11 +50,10 @@ export type OrderProduct = {
 }
 
 export type RatingType = {
-
     user: string
     comment: string
     rating: number
-    profileImage: string
+    profileImage?: string
     product: ProductType
 }