QuizQuestion.spec.tsx

import { render, waitFor } from '@testing-library/react'
import { UserQuestionState } from 'enums'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import QuizQuestion from './QuizQuestion'

jest.mock('services/quiz.service', () => {
  return jest.fn(() => {
    return {
      getCustomQuestion: jest.fn(),
    }
  })
})

jest.mock(
  'components/Quiz/QuizQuestion/QuizQuestionContentCustom',
  () => 'mock-customQuestion'
)
jest.mock(
  'components/Quiz/QuizQuestion/QuizQuestionContent',
  () => 'mock-question'
)

describe('QuizQuestion component', () => {
  const store = createMockEcolyoStore()

  it('should be rendered correctly with question', async () => {
    const { container } = render(
      <Provider store={store}>
        <QuizQuestion userChallenge={userChallengeData[0]} />
      </Provider>
    )
    expect(container.getElementsByTagName('mock-question').length).toBeTruthy()
    expect(
      container.getElementsByTagName('mock-customQuestion').length
    ).toBeFalsy()
  })

  it('should be rendered correctly with customQuestion', async () => {
    const updateUserChallengeData = {
      ...userChallengeData[0],
    }
    updateUserChallengeData.quiz.questions.forEach(
      answer => (answer.result = UserQuestionState.CORRECT)
    )
    const { container } = render(
      <Provider store={store}>
        <QuizQuestion userChallenge={updateUserChallengeData} />
      </Provider>
    )
    await waitFor(() => null, { container })
    expect(container.getElementsByTagName('mock-question').length).toBeFalsy()
    expect(
      container.getElementsByTagName('mock-customQuestion').length
    ).toBeTruthy()
  })
})