diff --git a/src/screens/Question/index.test.tsx b/src/screens/Question/index.test.tsx
index a37e0e2..a25e391 100644
--- a/src/screens/Question/index.test.tsx
+++ b/src/screens/Question/index.test.tsx
@@ -1,11 +1,22 @@
import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
+import { useAppDispatch, useAppSelector } from 'hooks';
+import { SurveyState } from 'store/reducers/Survey';
import TestWrapper from 'tests/TestWrapper';
import QuestionScreen, { questionScreenTestIds } from '.';
+const mockDispatch = jest.fn();
+const mockUseNavigate = jest.fn();
+
+jest.mock('hooks');
+jest.mock('react-router-dom', () => ({
+ ...(jest.requireActual('react-router-dom') as jest.Mock),
+ useNavigate: () => mockUseNavigate,
+}));
+
describe('QuestionScreen', () => {
const TestComponent = (): JSX.Element => {
return (
@@ -15,16 +26,110 @@ describe('QuestionScreen', () => {
);
};
+ const mockState: { survey: SurveyState } = {
+ survey: {
+ survey: {
+ id: 'd5de6a8f8f5f1cfe51bc',
+ resourceType: 'survey',
+ title: 'Scarlett Bangkok',
+ description: "We'd love ot hear from you!",
+ coverImageUrl: 'https://dhdbhh0jsld0o.cloudfront.net/m/1ea51560991bcb7d00d0_',
+ questions: [
+ {
+ id: 'question 1',
+ resourceType: 'question',
+ text: 'Question 1',
+ displayType: 'intro',
+ answers: [],
+ },
+ {
+ id: 'question 2',
+ resourceType: 'question',
+ text: 'Question 2',
+ displayType: 'slider',
+ answers: [
+ {
+ id: 'answer 1',
+ resourceType: 'answer',
+ text: 'Answer 1',
+ },
+ {
+ id: 'answer 2',
+ resourceType: 'answer',
+ text: 'Answer 2',
+ },
+ ],
+ },
+ {
+ id: 'question 3',
+ resourceType: 'question',
+ text: 'Question 3',
+ displayType: 'outro',
+ answers: [],
+ },
+ ],
+ },
+ isLoading: true,
+ isError: false,
+ },
+ };
+
+ beforeEach(() => {
+ (useAppSelector as jest.Mock).mockImplementation((callback) => callback(mockState));
+ (useAppDispatch as jest.Mock).mockImplementation(() => mockDispatch);
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
it('renders Question screen and its components', () => {
render(