diff --git a/src/components/Answer/index.test.tsx b/src/components/Answer/index.test.tsx
index 3a76e8e..724510c 100644
--- a/src/components/Answer/index.test.tsx
+++ b/src/components/Answer/index.test.tsx
@@ -2,175 +2,111 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import { Question } from 'types/question';
+import { appSliderDataTestIds } from 'components/AppSlider';
+import { dropdownDataTestIds } from 'components/Dropdown';
+import { multiChoiceDataTestIds } from 'components/MultiChoice';
+import { multiInputsDataTestIds } from 'components/MultiInputs';
+import { npsDataTestIds } from 'components/Nps';
+import { ratingDataTestIds } from 'components/Rating';
+import { textAreaDataTestIds } from 'components/TextArea';
+import { questionFabricator } from 'tests/fabricator';
 
-import Answer from '.';
+import Answer, { answerDataTestIds } from '.';
 
 describe('Answer', () => {
   describe('given the display type is star', () => {
     it('renders Rating component', () => {
-      const question: Question = {
-        id: 'id',
-        resourceType: 'question',
-        displayType: 'star',
-        answers: [],
-      };
-      const dataTestId = 'answer';
-      render(<Answer question={question} data-test-id={dataTestId} />);
+      const question = questionFabricator();
 
-      const star = screen.getByTestId(dataTestId);
+      render(<Answer question={question} />);
+
+      const star = screen.getByTestId(ratingDataTestIds.base);
 
       expect(star).toBeVisible();
-      expect(star).toHaveAttribute('id', 'rating-id');
     });
   });
 
   describe('given the display type is choice', () => {
     it('renders MultiChoice component', () => {
-      const question: Question = {
-        id: 'id',
-        resourceType: 'question',
-        displayType: 'choice',
-        answers: [],
-      };
-      const dataTestId = 'answer';
-      render(<Answer question={question} data-test-id={dataTestId} />);
+      const question = questionFabricator({ displayType: 'choice' });
+
+      render(<Answer question={question} />);
 
-      const multiChoice = screen.getByTestId(dataTestId);
+      const multiChoice = screen.getByTestId(multiChoiceDataTestIds.base);
 
       expect(multiChoice).toBeVisible();
-      expect(multiChoice).toHaveAttribute('id', 'multi-choice-id');
     });
   });
 
   describe('given the display type is nps', () => {
     it('renders Nps component', () => {
-      const question: Question = {
-        id: 'id',
-        resourceType: 'question',
-        displayType: 'nps',
-        answers: [],
-      };
-      const dataTestId = 'answer';
-      render(<Answer question={question} data-test-id={dataTestId} />);
+      const question = questionFabricator({ displayType: 'nps' });
 
-      const nps = screen.getByTestId(dataTestId);
+      render(<Answer question={question} />);
+
+      const nps = screen.getByTestId(npsDataTestIds.base);
 
       expect(nps).toBeVisible();
-      expect(nps).toHaveAttribute('id', 'nps-id');
     });
   });
 
   describe('given the display type is textarea', () => {
     it('renders TextArea component', () => {
-      const question: Question = {
-        id: 'id',
-        resourceType: 'question',
-        displayType: 'textarea',
-        answers: [
-          {
-            id: 'id',
-            resourceType: 'answer',
-            text: '',
-          },
-        ],
-      };
-      const dataTestId = 'answer';
-      render(<Answer question={question} data-test-id={dataTestId} />);
-
-      const textArea = screen.getByTestId(dataTestId);
+      const question = questionFabricator({ displayType: 'textarea' });
+
+      render(<Answer question={question} />);
+
+      const textArea = screen.getByTestId(textAreaDataTestIds.base);
 
       expect(textArea).toBeVisible();
-      expect(textArea).toHaveAttribute('id', 'text-area-id');
     });
   });
 
   describe('given the display type is textfield', () => {
     it('renders MultiInputs component', () => {
-      const question: Question = {
-        id: 'id',
-        resourceType: 'question',
-        displayType: 'textfield',
-        answers: [
-          {
-            id: 'id',
-            resourceType: 'answer',
-            text: '',
-          },
-        ],
-      };
-      const dataTestId = 'answer';
-      render(<Answer question={question} data-test-id={dataTestId} />);
-
-      const multiInputs = screen.getByTestId(dataTestId);
+      const question = questionFabricator({ displayType: 'textfield' });
+
+      render(<Answer question={question} />);
+
+      const multiInputs = screen.getByTestId(multiInputsDataTestIds.base);
 
       expect(multiInputs).toBeVisible();
-      expect(multiInputs).toHaveAttribute('id', 'multi-inputs-id');
     });
   });
 
   describe('given the display type is dropdown', () => {
     it('renders Dropdown component', () => {
-      const question: Question = {
-        id: 'id',
-        resourceType: 'question',
-        displayType: 'dropdown',
-        answers: [
-          {
-            id: 'id',
-            resourceType: 'answer',
-            text: '',
-          },
-        ],
-      };
-      const dataTestId = 'answer';
-      render(<Answer question={question} data-test-id={dataTestId} />);
-
-      const dropdown = screen.getByTestId(dataTestId);
+      const question = questionFabricator({ displayType: 'dropdown' });
+
+      render(<Answer question={question} />);
+
+      const dropdown = screen.getByTestId(dropdownDataTestIds.base);
 
       expect(dropdown).toBeVisible();
-      expect(dropdown).toHaveAttribute('id', 'dropdown-id');
     });
   });
 
   describe('given the display type is slider', () => {
     it('renders Dropdown component', () => {
-      const question: Question = {
-        id: 'id',
-        resourceType: 'question',
-        displayType: 'slider',
-        answers: [
-          {
-            id: 'id',
-            resourceType: 'answer',
-            text: '',
-          },
-        ],
-      };
-      const dataTestId = 'answer';
-      render(<Answer question={question} data-test-id={dataTestId} />);
-
-      const slider = screen.getByTestId(dataTestId);
+      const question = questionFabricator({ displayType: 'slider' });
+
+      render(<Answer question={question} />);
+
+      const slider = screen.getByTestId(appSliderDataTestIds.base);
 
       expect(slider).toBeVisible();
-      expect(slider).toHaveAttribute('id', 'slider-id');
     });
   });
 
   describe('given the display type is intro', () => {
-    it('renders Dropdown component', () => {
-      const question: Question = {
-        id: 'id',
-        resourceType: 'question',
-        displayType: 'intro',
-        answers: [],
-      };
-      const dataTestId = 'answer';
-      render(<Answer question={question} data-test-id={dataTestId} />);
-
-      const intro = screen.getByTestId(dataTestId);
-
-      expect(intro).toBeVisible();
+    it('does NOT render any components', () => {
+      const question = questionFabricator({ displayType: 'intro' });
+
+      render(<Answer question={question} />);
+
+      const intro = screen.getByTestId(answerDataTestIds.base);
+
+      expect(intro).toBeEmptyDOMElement();
     });
   });
 });
diff --git a/src/components/Answer/index.tsx b/src/components/Answer/index.tsx
index 880127c..16baa15 100644
--- a/src/components/Answer/index.tsx
+++ b/src/components/Answer/index.tsx
@@ -9,83 +9,94 @@ import Rating from 'components/Rating';
 import TextArea from 'components/TextArea';
 import { DisplayType, Question, getDisplayTypeEnum } from 'types/question';
 
+export const answerDataTestIds = {
+  base: 'answer__base',
+};
+
 interface AnswerProps {
   question: Question;
-  'data-test-id'?: string;
 }
-const Answer = ({ question, ...rest }: AnswerProps): JSX.Element => {
+const Answer = ({ question }: AnswerProps): JSX.Element => {
   const displayTypeEnum = getDisplayTypeEnum(question);
 
-  switch (displayTypeEnum) {
-    case DisplayType.Heart:
-    case DisplayType.Smiley:
-    case DisplayType.Thumbs:
-    case DisplayType.Star:
-      return (
-        <Rating
-          items={question.answers}
-          displayType={displayTypeEnum}
-          onValueChanged={() => {
-            // TODO
-          }}
-        />
-      );
-    case DisplayType.Choice:
-      return (
-        <MultiChoice
-          items={question.answers}
-          isPickOne={question?.pick === 'one'}
-          onValuesChanged={() => {
-            // TODO
-          }}
-        />
-      );
-    case DisplayType.Nps:
-      return (
-        <Nps
-          items={question.answers}
-          onValuesChanged={() => {
-            // TODO
-          }}
-        />
-      );
-    case DisplayType.Textarea:
-      return (
-        <TextArea
-          items={question.answers}
-          onValueChange={() => {
-            // TODO
-          }}
-        />
-      );
-    case DisplayType.Textfield:
-      return <MultiInputs questionId={question.id} items={question.answers} />;
-    case DisplayType.Dropdown:
-      return (
-        <Dropdown
-          questionId={question.id}
-          items={question.answers}
-          onValueChanged={() => {
-            // TODO
-          }}
-        />
-      );
-    case DisplayType.Slider:
-      return (
-        <AppSlider
-          min={0}
-          max={question.answers.length}
-          onValueChanged={() => {
-            // TODO
-          }}
-        />
-      );
-    case DisplayType.Unknown:
-    case DisplayType.Intro:
-    case DisplayType.Outro:
-    default:
-      return <div {...rest}></div>;
-  }
+  const answerComponent = (): JSX.Element => {
+    switch (displayTypeEnum) {
+      case DisplayType.Heart:
+      case DisplayType.Smiley:
+      case DisplayType.Thumbs:
+      case DisplayType.Star:
+        return (
+          <Rating
+            items={question.answers}
+            displayType={displayTypeEnum}
+            onValueChanged={() => {
+              // TODO
+            }}
+          />
+        );
+      case DisplayType.Choice:
+        return (
+          <MultiChoice
+            items={question.answers}
+            isPickOne={question?.pick === 'one'}
+            onValuesChanged={() => {
+              // TODO
+            }}
+          />
+        );
+      case DisplayType.Nps:
+        return (
+          <Nps
+            items={question.answers}
+            onValuesChanged={() => {
+              // TODO
+            }}
+          />
+        );
+      case DisplayType.Textarea:
+        return (
+          <TextArea
+            items={question.answers}
+            onValueChange={() => {
+              // TODO
+            }}
+          />
+        );
+      case DisplayType.Textfield:
+        return <MultiInputs questionId={question.id} items={question.answers} />;
+      case DisplayType.Dropdown:
+        return (
+          <Dropdown
+            questionId={question.id}
+            items={question.answers}
+            onValueChanged={() => {
+              // TODO
+            }}
+          />
+        );
+      case DisplayType.Slider:
+        return (
+          <AppSlider
+            min={0}
+            max={question.answers.length}
+            onValueChanged={() => {
+              // TODO
+            }}
+          />
+        );
+      case DisplayType.Unknown:
+      case DisplayType.Intro:
+      case DisplayType.Outro:
+      default:
+        return <></>;
+    }
+  };
+
+  return (
+    <div key={question.id} data-test-id={answerDataTestIds.base}>
+      {answerComponent()}
+    </div>
+  );
 };
 
 export default Answer;
diff --git a/src/components/MultiInputs/index.test.tsx b/src/components/MultiInputs/index.test.tsx
index c3389e1..ca8bd84 100644
--- a/src/components/MultiInputs/index.test.tsx
+++ b/src/components/MultiInputs/index.test.tsx
@@ -2,24 +2,21 @@ import React from 'react';
 
 import { render, screen, within } from '@testing-library/react';
 
-import MultiInputs from '.';
+import { answerFabricator } from 'tests/fabricator';
 
-describe('MultiInputs', () => {
-  const multiInputsDataTestId = 'multiInputs';
+import MultiInputs, { multiInputsDataTestIds } from '.';
 
+describe('MultiInputs', () => {
   it('renders a multi inputs component', () => {
-    const answers = [
-      { id: '1', resourceType: 'answer', text: 'Test 1' },
-      { id: '2', resourceType: 'answer', text: 'Test 2' },
-      { id: '3', resourceType: 'answer', text: 'Test 3' },
-    ];
-    render(<MultiInputs questionId="question id" items={answers} data-test-id={multiInputsDataTestId} />);
+    const answers = answerFabricator.times(3);
+
+    render(<MultiInputs questionId="question id" items={answers} />);
 
-    const multiInputs = screen.getByTestId(multiInputsDataTestId);
+    const multiInputs = screen.getByTestId(multiInputsDataTestIds.base);
 
     expect(multiInputs).toBeVisible();
-    expect(within(multiInputs).getByPlaceholderText('Test 1')).toBeVisible();
-    expect(within(multiInputs).getByPlaceholderText('Test 2')).toBeVisible();
-    expect(within(multiInputs).getByPlaceholderText('Test 3')).toBeVisible();
+    expect(within(multiInputs).getByPlaceholderText(answers[0].text)).toBeVisible();
+    expect(within(multiInputs).getByPlaceholderText(answers[1].text)).toBeVisible();
+    expect(within(multiInputs).getByPlaceholderText(answers[2].text)).toBeVisible();
   });
 });
diff --git a/src/components/MultiInputs/index.tsx b/src/components/MultiInputs/index.tsx
index 2f0a5f9..fb12a87 100644
--- a/src/components/MultiInputs/index.tsx
+++ b/src/components/MultiInputs/index.tsx
@@ -4,13 +4,16 @@ import TextInput from 'components/TextInput';
 import { Answer } from 'types/answer';
 import { AnswerRequest } from 'types/request/surveySubmitRequest';
 
+export const multiInputsDataTestIds = {
+  base: 'multi-inputs__base',
+};
+
 interface MultiInputProps {
   questionId: string;
   items: Answer[];
   onValuesChanged?: (answers: AnswerRequest[]) => void;
-  'data-test-id'?: string;
 }
-const MultiInputs = ({ questionId, items, onValuesChanged, ...rest }: MultiInputProps): JSX.Element => {
+const MultiInputs = ({ questionId, items, onValuesChanged }: MultiInputProps): JSX.Element => {
   const [selectedValues, setSelectedValues] = useState<AnswerRequest[]>([]);
 
   const handleValuesChanged = (answer: Answer, content: string) => {
@@ -35,7 +38,7 @@ const MultiInputs = ({ questionId, items, onValuesChanged, ...rest }: MultiInput
   }, [questionId, items]);
 
   return (
-    <div id={`multi-inputs-${questionId}`} {...rest}>
+    <div data-test-id={multiInputsDataTestIds.base}>
       {items.map((item) => (
         <div key={item.id}>
           <TextInput
diff --git a/src/components/Rating/index.test.tsx b/src/components/Rating/index.test.tsx
index a85c2b5..059c6d9 100644
--- a/src/components/Rating/index.test.tsx
+++ b/src/components/Rating/index.test.tsx
@@ -22,6 +22,8 @@ describe('Rating', () => {
       // Do nothing
     };
 
+    console.log(answers);
+
     render(<Rating onValueChanged={onValueChanged} {...ratingProps} />);
 
     const rating = screen.getByTestId(ratingDataTestIds.base);
@@ -41,6 +43,7 @@ describe('Rating', () => {
         displayType: DisplayType.Star,
         onValueChanged: onValueChanged,
       };
+      console.log(answers);
 
       render(<Rating {...ratingProps} />);
 
diff --git a/src/screens/Question/index.test.tsx b/src/screens/Question/index.test.tsx
index 80e7a34..f5cb6bb 100644
--- a/src/screens/Question/index.test.tsx
+++ b/src/screens/Question/index.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { act, render, screen } from '@testing-library/react';
 
+import { answerDataTestIds } from 'components/Answer';
 import { useAppDispatch, useAppSelector } from 'hooks';
 import { SurveyState } from 'store/reducers/Survey';
 import TestWrapper from 'tests/TestWrapper';
@@ -88,7 +89,7 @@ describe('QuestionScreen', () => {
 
     const currentIndex = screen.getByTestId(questionScreenTestIds.index);
     const questionTitle = screen.getByTestId(questionScreenTestIds.title);
-    const answerComponent = screen.getByTestId(questionScreenTestIds.answer);
+    const answerComponent = screen.getByTestId(answerDataTestIds.base);
     const closeButton = screen.getByTestId(questionScreenTestIds.closeButton);
     const nextButton = screen.getByTestId(questionScreenTestIds.nextButton);
 
diff --git a/src/screens/Question/index.tsx b/src/screens/Question/index.tsx
index f607790..60c85d0 100644
--- a/src/screens/Question/index.tsx
+++ b/src/screens/Question/index.tsx
@@ -11,7 +11,6 @@ import { useAppSelector } from 'hooks';
 export const questionScreenTestIds = {
   index: 'question__index',
   title: 'question__title',
-  answer: 'question__answer',
   closeButton: 'question__close-button',
   nextButton: 'question__next-button',
 };
@@ -62,7 +61,7 @@ const QuestionScreen = (): JSX.Element => {
           {currentQuestion && (
             <div className="mt-16">
               <p>{currentQuestion.displayType}</p>
-              <Answer question={currentQuestion} data-test-id={questionScreenTestIds.answer} />
+              <Answer question={currentQuestion} />
             </div>
           )}
         </div>
diff --git a/src/tests/fabricator.ts b/src/tests/fabricator.ts
index f7bbe0d..65485b6 100644
--- a/src/tests/fabricator.ts
+++ b/src/tests/fabricator.ts
@@ -14,17 +14,17 @@ export const testTypeFabricator = Fabricator({
 
 // Requests
 const answerRequestFabricator = Fabricator({
-  id: () => sequence('answerId').toString(),
+  id: () => sequence('answerRequestId').toString(),
   answer: () => faker.string.sample(),
 });
 
 const questionRequestFabricator = Fabricator({
-  id: () => sequence('questionId').toString(),
+  id: () => sequence('questionRequestId').toString(),
   answers: () => answerRequestFabricator.times(2),
 });
 
 export const surveySubmitRequestFabricator = Fabricator({
-  surveyId: () => sequence('surveyId').toString(),
+  surveyId: () => sequence('surveySubmitRequestId').toString(),
   questions: () => questionRequestFabricator.times(10),
 });
 
@@ -95,11 +95,26 @@ export const surveyFabricator = Fabricator({
 });
 
 export const answerFabricator = Fabricator({
-  id: () => sequence().toString(),
+  id: () => sequence('answerId').toString(),
   resourceType: 'answer',
   text: () => faker.string.sample(),
 });
 
+export const questionFabricator = Fabricator({
+  id: () => sequence('questionId').toString(),
+  resourceType: 'question',
+  text: () => faker.string.sample(),
+  displayType: 'star',
+  answers: answerFabricator.times(5),
+});
+
+/*
+ * We need to reset the answerId sequence to start from "1" since the first
+ * five sequences have already been created above. This will ensure that the
+ * next time we generate an id in a test file, it will begin with "1".
+ */
+sequence.reset('answerId');
+
 // States
 export const surveyStateFabricator = Fabricator({
   survey: () => surveyFabricator(),
diff --git a/src/types/question.ts b/src/types/question.ts
index 0a72d23..3cb2f65 100644
--- a/src/types/question.ts
+++ b/src/types/question.ts
@@ -20,19 +20,19 @@ export interface Question extends Resource {
 }
 
 export enum DisplayType {
-  Intro = 'intro',
-  Star = 'star',
-  Heart = 'heart',
-  Smiley = 'smiley',
-  Thumbs = 'thumbs',
-  Choice = 'choice',
-  Nps = 'nps',
-  Slider = 'slider',
-  Textarea = 'textarea',
-  Textfield = 'textfield',
-  Dropdown = 'dropdown',
-  Outro = 'outro',
-  Unknown = '',
+  Intro,
+  Star,
+  Heart,
+  Smiley,
+  Thumbs,
+  Choice,
+  Nps,
+  Slider,
+  Textarea,
+  Textfield,
+  Dropdown,
+  Outro,
+  Unknown,
 }
 
 export const getDisplayTypeEnum = (question: Question): DisplayType => {