diff --git a/client/dist/styles.css b/client/dist/styles.css
index 7f23cb1..a186ad7 100644
--- a/client/dist/styles.css
+++ b/client/dist/styles.css
@@ -548,9 +548,15 @@ input:checked+.slider:before {
   margin-top: 20px;
   border-bottom: solid grey 2px;
 }
+
+.question-helpful-div {
+  display: inline-flex;
+  flex-direction: row;
+  font-size: 15px;
+}
 /* .question-list {
   width: auto;
-  height: 40vh;
+  height: 50vh;
   overflow-y: scroll;
 } */
 .question-control {
diff --git a/client/src/QA/QAcomponents/AddQuestion.jsx b/client/src/QA/QAcomponents/AddQuestion.jsx
index 814d41b..b762781 100644
--- a/client/src/QA/QAcomponents/AddQuestion.jsx
+++ b/client/src/QA/QAcomponents/AddQuestion.jsx
@@ -12,7 +12,7 @@ const AddQuestion = ({ productId, handleModalClose, openModal, prodName }) => {
   };
 
   const regexVerifyEmail = (email) => {
-    const characterTest = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    const characterTest = /^(([^<>()[\]\\.,;:\s@']+(\.[^<>()[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
     return characterTest.test(email);
   };
 
@@ -31,7 +31,9 @@ const AddQuestion = ({ productId, handleModalClose, openModal, prodName }) => {
         body: questionBody,
         name: name,
         email: email,
+        /* eslint-disable */
         product_id: productId
+        /* eslint-enable */
       })
         .then((response) => {
           console.log('succesful question post', response.data);
@@ -43,7 +45,7 @@ const AddQuestion = ({ productId, handleModalClose, openModal, prodName }) => {
       : null;
   };
   const QuestionModalForm = (
-    <div
+    <div data-testid='add-question-test'
       className='question-modals'
       onClick={event => selectModal(event)}
     >
@@ -66,11 +68,11 @@ const AddQuestion = ({ productId, handleModalClose, openModal, prodName }) => {
           <input
             className='question-email-input'
             onChange={(event) => { dataFill(event); }}
-            placeholder="Example: jack@email.com"
-            type="email"
+            placeholder='Example: jack@email.com'
+            type='email'
             name='email'
-            maxLength="60"
-            autoComplete="off"
+            maxLength='60'
+            autoComplete='off'
             value={email}
             required
           ></input>
@@ -83,11 +85,11 @@ const AddQuestion = ({ productId, handleModalClose, openModal, prodName }) => {
           <input
             className='question-name-input'
             onChange={(event) => { dataFill(event); }}
-            placeholder="Examples: jackson11!"
-            type="text"
+            placeholder='Examples: jackson11!'
+            type='text'
             name='name'
-            maxLength="60"
-            autoComplete="off"
+            maxLength='60'
+            autoComplete='off'
             value={name}
             required
           ></input>
@@ -100,12 +102,12 @@ const AddQuestion = ({ productId, handleModalClose, openModal, prodName }) => {
           <textarea
             className='question-ask'
             onChange={(event) => { dataFill(event); }}
-            placeholder="Enter Question Here..."
-            type="text"
-            name="question"
-            maxLength="1000"
-            minLength=""
-            autoComplete="off"
+            placeholder='Enter Question Here...'
+            type='text'
+            name='question'
+            maxLength='1000'
+            minLength=''
+            autoComplete='off'
             value={questionBody}
             required
           ></textarea>
diff --git a/client/src/QA/QAcomponents/AnswerHelpful.jsx b/client/src/QA/QAcomponents/AnswerHelpful.jsx
index ea42b64..50a35ab 100644
--- a/client/src/QA/QAcomponents/AnswerHelpful.jsx
+++ b/client/src/QA/QAcomponents/AnswerHelpful.jsx
@@ -33,7 +33,7 @@ const AnswerHelpful = ({ answerHelpfulness, answerDate, answerId, answerName })
         : null;
   };
   return (
-    <div className='answer-helpfulness-div'>
+    <div className='answer-helpfulness-div' data-testid='answer-helpful-test'>
       <>by {answerName}, {convertDate(answerDate)} |</>
       &nbsp;Helpful?&nbsp;
       <p
diff --git a/client/src/QA/QAcomponents/AnswerPhotos.jsx b/client/src/QA/QAcomponents/AnswerPhotos.jsx
index 44ff7b5..676669e 100644
--- a/client/src/QA/QAcomponents/AnswerPhotos.jsx
+++ b/client/src/QA/QAcomponents/AnswerPhotos.jsx
@@ -20,7 +20,7 @@ const AnswerPhotos = ({ photo }) => {
   );
 
   return (
-    <div>
+    <div data-testid='answer-photo-test'>
       <div className='answer-photo-box'>
         <img
           className='answer-photo'
diff --git a/client/src/QA/QAcomponents/Answers.jsx b/client/src/QA/QAcomponents/Answers.jsx
index 57f4c4d..21e9967 100644
--- a/client/src/QA/QAcomponents/Answers.jsx
+++ b/client/src/QA/QAcomponents/Answers.jsx
@@ -4,7 +4,7 @@ import AnswerPhotos from './AnswerPhotos.jsx';
 import AnswerHelpful from './AnswerHelpful.jsx';
 
 const Answers = ({ answer }) => (
-  <div className='answer-div'>
+  <div className='answer-div' data-testid='answer-list-test'>
     <div className='answer'>A: {answer.body}</div>
     <div className='photo-div'>
       {answer.photos.length ? answer.photos.map((photo, id) => (
diff --git a/client/src/QA/QAcomponents/MoreAnswers.jsx b/client/src/QA/QAcomponents/MoreAnswers.jsx
index afef56f..f7ea939 100644
--- a/client/src/QA/QAcomponents/MoreAnswers.jsx
+++ b/client/src/QA/QAcomponents/MoreAnswers.jsx
@@ -5,7 +5,7 @@ const MoreAnswers = ({ answer, answerList }) => {
   const [collapseAnswers, setCollapseAnswers] = useState(true);
 
   return (
-    <div>
+    <div data-testid='more-answer-test'>
       {
         collapseAnswers
           ? <>
diff --git a/client/src/QA/QAcomponents/MoreQuestions.jsx b/client/src/QA/QAcomponents/MoreQuestions.jsx
index 018feda..00b7cbe 100644
--- a/client/src/QA/QAcomponents/MoreQuestions.jsx
+++ b/client/src/QA/QAcomponents/MoreQuestions.jsx
@@ -5,7 +5,7 @@ const MoreQuestions = ({ questions }) => {
   const [collapseQuestions, setCollapseQuestions] = useState(true);
 
   return (
-    <div>
+    <div data-testid='more-questions-test'>
       {
         collapseQuestions
           ? <>
diff --git a/client/src/QA/QAcomponents/Question.jsx b/client/src/QA/QAcomponents/Question.jsx
index 9a1f50d..8e65d08 100644
--- a/client/src/QA/QAcomponents/Question.jsx
+++ b/client/src/QA/QAcomponents/Question.jsx
@@ -8,7 +8,7 @@ const Question = ({ question, productId }) => {
   let answerList = answerKey.map(Ans => question.answers[Ans]);
 
   return (
-    <div className='question'>
+    <div className='question' data-testid='individual-question-test'>
       <span className='question-control'>
         Q: {question.question_body}
         <QuestionHelpful
diff --git a/client/src/QA/QAcomponents/QuestionHelpful.jsx b/client/src/QA/QAcomponents/QuestionHelpful.jsx
index 9c5c05e..22e56df 100644
--- a/client/src/QA/QAcomponents/QuestionHelpful.jsx
+++ b/client/src/QA/QAcomponents/QuestionHelpful.jsx
@@ -119,18 +119,12 @@ const QuestionHelpful = ({ questionBody, helpfulness, questionId, productId }) =
             Submit Answer
           </button>
         </form>
-
       </div>
-
     </div>
   );
 
   return (
-    <div style={{
-      display: 'inline-flex',
-      flexDirection: 'row',
-      fontSize: 15
-    }}>
+    <div className='question-helpful-div' data-testid='question-helpful-test'>
       Helpful?&nbsp;
       <p
         className='helpful-button'
diff --git a/client/src/QA/QAcomponents/QuestionList.jsx b/client/src/QA/QAcomponents/QuestionList.jsx
index 1be4624..7d15cb5 100644
--- a/client/src/QA/QAcomponents/QuestionList.jsx
+++ b/client/src/QA/QAcomponents/QuestionList.jsx
@@ -4,7 +4,7 @@ import MoreQuestions from './MoreQuestions.jsx';
 import AddQuestion from './AddQuestion.jsx';
 
 const QuestionList = ({ questions, searchInput, productId, openModal, handleModalOpen, handleModalClose }) => (
-  <div className='question-list'>
+  <div className='question-list' data-testid='qa-list-test'>
     {
       searchInput === null
         ?
diff --git a/client/src/QA/QAcomponents/Search.jsx b/client/src/QA/QAcomponents/Search.jsx
index 6d66a28..5661e9f 100644
--- a/client/src/QA/QAcomponents/Search.jsx
+++ b/client/src/QA/QAcomponents/Search.jsx
@@ -9,7 +9,7 @@ const Search = ({ handleSearch, searchInput }) => {
   };
 
   return (
-    <div className='qa-search'>
+    <div className='qa-search' data-testid='search-test'>
       <form>
         <input
           className='qa-search-bar'
diff --git a/client/src/QA/Test /QAcomponents.test.js b/client/src/QA/Test /QAcomponents.test.js
index 8b47d1c..518667e 100644
--- a/client/src/QA/Test /QAcomponents.test.js	
+++ b/client/src/QA/Test /QAcomponents.test.js	
@@ -1,5 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render, screen, cleanup } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+
 import Search from '../QAcomponents/Search.jsx';
 import QuestionList from '../QAcomponents/QuestionList.jsx';
 import AddQuestion from '../QAcomponents/AddQuestion.jsx';
@@ -9,71 +12,140 @@ import Answers from '../QAcomponents/Answers.jsx';
 import MoreAnswers from '../QAcomponents/MoreAnswers.jsx';
 import Question from '../QAcomponents/Question.jsx';
 import QuestionHelpful from '../QAcomponents/QuestionHelpful.jsx';
+import MoreQuestions from '../QAcomponents/MoreQuestions.jsx';
 import sample from './sampleData.js';
 
+afterEach(() => {
+  cleanup();
+});
 
 // npm test -- -t 'render Q&A Search without crashing'
-it ('render Q&A Search without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<Search />, div);
+test ('render Q&A Search without crashing', () => {
+  render(<Search
+    searchInput={'tuna'}/>);
+  const searchElement = screen.getByTestId('search-test');
+  expect(searchElement).toBeInTheDocument();
 });
+
 // npm test -- -t 'render Question List without crashing'
-it ('render Question List without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<QuestionList
+test ('render Question List without crashing', () => {
+  render(<QuestionList
     questions={sample.questions.results}
     searchInput={null}
-    productId={13023}/>, div);
+    productId={13023}/>);
+  const questionListElement = screen.getByTestId('qa-list-test');
+  expect(questionListElement).toBeInTheDocument();
 });
+
 // npm test -- -t 'render Add Question Button Modal crashing'
-it ('render Add Question Button Modal crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<AddQuestion />, div);
+test ('render Add Question Button Modal crashing', () => {
+  render(<AddQuestion
+    openModal={true}/>);
+  const addQuestionElement = screen.getByTestId('add-question-test');
+  expect(addQuestionElement).toBeInTheDocument();
 });
+
 // npm test -- -t 'render Answer Helpfulness without crashing'
-it ('render Answer Helpfulness without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<AnswerHelpful
+test ('render Answer Helpfulness without crashing', () => {
+  render(<AnswerHelpful
     answerId={sample.questions.results[0].answers.id}
     answerHelpfulness={sample.questions.results[0].answers.helpfulness}
     answerDate={'2018-08-18T00:00:00.000Z'}
-    answerName={sample.questions.results[0].answers.answerer_name}/>, div);
+    answerName={sample.questions.results[0].answers.answerer_name}/>);
+  const answerHelpfulElement = screen.getByTestId('answer-helpful-test');
+  expect(answerHelpfulElement).toBeInTheDocument();
 });
+
 // npm test -- -t 'render Answer Photos without crashing'
-it ('render Answer Photos without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<AnswerPhotos
+test ('render Answer Photos without crashing', () => {
+  render(<AnswerPhotos
     photo={'urlplaceholder/answer_5_photo_number_1.jpg'}
-    key={1}/>, div);
+    key={1}/>);
+  const answerPhotosElement = screen.getByTestId('answer-photo-test');
+  expect(answerPhotosElement).toBeInTheDocument();
 });
+
 // npm test -- -t 'render Answer List without crashing'
-it ('render Answer List without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<Answers
+test ('render Answer List without crashing', () => {
+  render(<Answers
     key={sample.questions.results[0].answers.id}
-    answer={[{
+    answer={
+      {
+        /* eslint-disable */
+        answerer_name: 'notKathy!',
+        /* eslint-enable */
+        body: 'This is a an answer!',
+        date: '2021-06-19T00:00:00.000Z',
+        helpfulness: 0,
+        id: 1992060,
+        photos: [{
+          'id': 1,
+          'url': 'urlplaceholder/answer_5_photo_number_1.jpg'
+        }]
+      }
+    }/>);
+  const answerListElement = screen.getByTestId('answer-list-test');
+  expect(answerListElement).toBeInTheDocument();
+});
+
+// npm test -- -t 'render More Answer button without crashing'
+test ('render More Answer button without crashing', () => {
+  render(<MoreAnswers
+    answerList={[{
       0: {
-        answerer_name: "notKathy!",
-        body: "This is a an answer!",
-        date: "2021-06-19T00:00:00.000Z",
+        /* eslint-disable */
+        answerer_name: 'notKathy!',
+        /* eslint-enable */
+        body: 'This is a an answer!',
+        date: '2021-06-19T00:00:00.000Z',
         helpfulness: 0,
-        id: 1992060
-      },
-      photos: []
-    }]}/>, div);
+        id: 1992060,
+        photos: [{
+          'id': 1,
+          'url': 'urlplaceholder/answer_5_photo_number_1.jpg'
+        }]
+      }
+    }]}
+    answer={{
+      /* eslint-disable */
+      answerer_name: 'notKathy!',
+      /* eslint-enable */
+      body: 'This is a an answer!',
+      date: '2021-06-19T00:00:00.000Z',
+      helpfulness: 0,
+      id: 1992060,
+      photos: [{
+        'id': 1,
+        'url': 'urlplaceholder/answer_5_photo_number_1.jpg'
+      }]
+    }}/>);
+  const moreAnswersElement = screen.getByTestId('more-answer-test');
+  expect(moreAnswersElement).toBeInTheDocument();
 });
 
-// it ('render More Answer button without crashing', () => {
-//   const div = document.createElement('div');
-//   ReactDOM.render(<MoreAnswers />, div);
-// });
+// npm test -- -t 'render Individual Questions without crashing'
+test ('render Individual Questions without crashing', () => {
+  render(<Question
+    question={sample.questions.results[0]}
+    key={sample.questions.results[0].question_id}/>);
+  const individualQuestionElement = screen.getByTestId('individual-question-test');
+  expect(individualQuestionElement).toBeInTheDocument();
+});
 
-// it ('render Individual Questions without crashing', () => {
-//   const div = document.createElement('div');
-//   ReactDOM.render(<Question />, div);
-// });
+// npm test -- -t 'render Question Helpfulness section without crashing'
+test ('render Question Helpfulness section without crashing', () => {
+  render(<QuestionHelpful
+    questionBody={sample.questions.results[0].question_body}
+    helpfulness={sample.questions.results[0].question_helpfulness}
+    questionId={sample.questions.results[0].question_id}/>);
+  const questionHelpfulElement = screen.getByTestId('question-helpful-test');
+  expect(questionHelpfulElement).toBeInTheDocument();
+});
 
-// it ('render Question Helpfulness section without crashing', () => {
-//   const div = document.createElement('div');
-//   ReactDOM.render(<QuestionHelpful />, div);
-// });
+// npm test -- -t 'render More Questions without crashing'
+test ('render More Questions without crashing', () => {
+  render(<MoreQuestions
+    questions={sample.questions.results}/>);
+  const moreQuestionsElement = screen.getByTestId('more-questions-test');
+  expect(moreQuestionsElement).toBeInTheDocument();
+});
\ No newline at end of file
diff --git a/client/src/QA/Test /sampleData.js b/client/src/QA/Test /sampleData.js
index f9a24c0..7d0433e 100644
--- a/client/src/QA/Test /sampleData.js	
+++ b/client/src/QA/Test /sampleData.js	
@@ -1,3 +1,4 @@
+/* eslint-disable */
 var sample = {
   "questions": {
     "product_id": "5",
@@ -83,6 +84,7 @@ var sample = {
     ]
   }
 };
+/* eslint-enable */
 
 
 module.exports = sample;
\ No newline at end of file