diff --git a/package-lock.json b/package-lock.json
index 5f776bd0..ba4732ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7696,6 +7696,12 @@
         "detect-newline": "^2.1.0"
       }
     },
+    "jest-dom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jest-dom/-/jest-dom-4.0.0.tgz",
+      "integrity": "sha512-gBxYZlZB1Jgvf2gP2pRfjjUWF8woGBHj/g5rAQgFPB/0K2atGuhVcPO+BItyjWeKg9zM+dokgcMOH01vrWVMFA==",
+      "dev": true
+    },
     "jest-each": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-24.9.0.tgz",
@@ -12386,6 +12392,12 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
+    "react-testing-library": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/react-testing-library/-/react-testing-library-8.0.1.tgz",
+      "integrity": "sha512-Gq4JC9r3prA4hYwo7afcbHHMFckO29+5Nrh2KblAEPuK/DWaU0bJE1vtpAgLhzhY9bBirmcgjjIHljHEwGAXKw==",
+      "dev": true
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
diff --git a/package.json b/package.json
index 5bb67304..0ae3cd39 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,9 @@
     ]
   },
   "devDependencies": {
+    "jest-dom": "^4.0.0",
     "mutationobserver-shim": "^0.3.3",
+    "react-testing-library": "^8.0.1",
     "sass": "^1.32.5"
   }
 }
diff --git a/src/components/ContactForm.test.js b/src/components/ContactForm.test.js
index 5f80a897..a64522fc 100644
--- a/src/components/ContactForm.test.js
+++ b/src/components/ContactForm.test.js
@@ -1,41 +1,119 @@
-import React from 'react';
-import {render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React rom 'React';
+import {render ,screen, waitFor } from '@testing-library/react';
 
+import userEvent from '@testing-library/user-event';
+import App from "./App";
 import ContactForm from './ContactForm';
 
 test('renders without errors', ()=>{
+
+render(<ContactForm/>)
     
 });
 
 test('renders the contact form header', ()=> {
+
+render(<ContactForm />)
+
+const header = screen.queryByText(/contact form/i)
+expect(header).toBeInTheDocument()
     
 });
 
 test('renders ONE error message if user enters less then 5 characters into firstname.', async () => {
+
+    render(<ContactForm/>)
+
+    const firstname = screen.getByLabelText("First Name*")
+    userEvent.type(firstname, "King")
+   const  errors = await screen.getByTestId(/errors/i) 
+   expect(errors.length).toEqual(1) 
+
     
 });
 
 test('renders THREE error messages if user enters no values into any fields.', async () => {
     
+
+render(<ContactForm/>)
+
+const button = screen.getByRole("button")
+userEvent.click(button)
+const errors = await screen.getByTestId(/errors/i)
+expect(errors.length).toEqual(3)
+
 });
 
 test('renders ONE error message if user enters a valid first name and last name but no email.', async () => {
     
+    render (<ContactForm/>) 
+    const firstname = screen.getByLabelText('First Name*')
+    const lastname = screen.getByLabelText("Last Name*")
+    const button = screen.getByRole("button")
+userEvent.type(firstname, "HELLO") 
+userEvent.type(lastname, "GOODBYE")
+userEvent.click(button)
+const errors = await screen.getByTestId(/errors/i)
+expect(errors.length).toEqual(1) 
+
 });
 
 test('renders "email must be a valid email address" if an invalid email is entered', async () => {
     
+    render (<ContactForm/>) 
+const email = screen.getByLabelText("Email*")
+userEvent.type(email, "A0L.com")
+const errors = await screen.queryByText(/email must be a vaild email address/i) 
+expect(errors).toBeInTheDocument()
+
+
+
 });
 
 test('renders "lastName is a required field" if an last name is not entered and the submit button is clicked', async () => {
-    
+    render (<ContactForm/>)  
+    const button = screen.getByRole("button")
+    userEvent.click(button)
+    const errors = screen.queryByText(/lastName is a required field/i)
+    await waitFor( ( ) => {
+        expect(errors).toBeInTheDocument()
+    } ) 
+
+
+
+
 });
 
 test('renders all firstName, lastName and email text when submitted. Does NOT render message if message is not submitted.', async () => {
-    
+    render (<ContactForm/>) 
+    const firstname = screen.getByLabelText('First Name*')
+    const lastname = screen.getByLabelText("Last Name*")
+    const button = screen.getByRole("button")
+    const email = screen.getByLabelText("Email*")
+ 
+userEvent.type(email, "email@A0L.com")
+userEvent.type(firstname, "HELLO") 
+userEvent.type(lastname, "GOODBYE")
+userEvent.click(button)
+
+const firstnameDisplay =  screen.getByTestId("firstnameDisplay")
+const lastnameDisplay =  screen.getByTestId("lastnameDisplay")
+const emailDisplay =  screen.getByTestId("emailDisplay")
+const messageDisplay =  screen.getByTestId("messageDisplay")
+expect(firstnameDisplay).toBeInTheDocument()
+expect(lastnameDisplay).toBeInTheDocument()
+expect(emailDisplay).toBeInTheDocument()
+expect(messageDisplay).toBeNull()
+
+
+
 });
 
 test('renders all fields text when all fields are submitted.', async () => {
-    
+    render (<ContactForm/>) 
+
+
+
+
+
 });
\ No newline at end of file