test(rtl): quiz

src/components/Quiz/QuizBegin/QuizBegin.spec.tsx

-import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { UserChallengeUpdateFlag } from 'enums'
-import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
@@ -16,15 +15,15 @@ jest.mock('services/challenge.service', () => {
 })
 
 describe('QuizBegin component', () => {
-  it('should be rendered correctly', () => {
+  it('should be rendered correctly', async () => {
     const store = createMockEcolyoStore()
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <QuizBegin userChallenge={userChallengeData[0]} />
       </Provider>
     )
-    expect(wrapper.find(StyledIcon).exists()).toBeTruthy()
-    wrapper.find('.button-start').find(Button).simulate('click')
+    expect(container.getElementsByClassName('quiz-icon')[0]).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('button'))
     expect(mockUserChallengeUpdateFlag).toHaveBeenCalledWith(
       userChallengeData[0],
       UserChallengeUpdateFlag.QUIZ_START

src/components/Quiz/QuizFinish/QuizFinish.spec.tsx

-import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { UserChallengeUpdateFlag } from 'enums'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 import QuizFinish from './QuizFinish'
 
@@ -25,21 +22,14 @@ jest.mock('react-router-dom', () => ({
 describe('QuizFinish', () => {
   it('should be rendered correctly', async () => {
     const store = createMockEcolyoStore()
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <QuizFinish userChallenge={userChallengeData[0]} />
       </Provider>
     )
-    expect(wrapper.find(StyledIcon).exists()).toBeTruthy()
-    wrapper.find(Button).forEach(node => {
-      node.simulate('click')
-    })
-    expect(mockUserChallengeUpdateFlag).toHaveBeenCalledWith(
-      userChallengeData[0],
-      UserChallengeUpdateFlag.QUIZ_RESET
-    )
-    await waitForComponentToPaint(wrapper)
-
+    expect(container.getElementsByClassName('quiz-icon')[0]).toBeInTheDocument()
+    await userEvent.click(screen.getAllByRole('button')[0])
+    expect(mockUserChallengeUpdateFlag).toHaveBeenCalled()
     expect(mockedNavigate).toHaveBeenCalledWith('/challenges')
   })
 })

src/components/Quiz/QuizFinish/QuizFinish.tsx

@@ -23,21 +23,19 @@ const QuizFinish = ({ userChallenge }: { userChallenge: UserChallenge }) => {
   )
 
   const retryQuiz = useCallback(async () => {
-    const userChallengeUpdated: UserChallenge =
-      await challengeService.updateUserChallenge(
-        userChallenge,
-        UserChallengeUpdateFlag.QUIZ_RESET
-      )
+    const userChallengeUpdated = await challengeService.updateUserChallenge(
+      userChallenge,
+      UserChallengeUpdateFlag.QUIZ_RESET
+    )
     dispatch(updateUserChallengeList(userChallengeUpdated))
   }, [dispatch, userChallenge, challengeService])
 
   const goBack = async () => {
-    const userChallengeUpdated: UserChallenge =
-      await challengeService.updateUserChallenge(
-        userChallenge,
-        UserChallengeUpdateFlag.QUIZ_UPDATE,
-        userChallenge.quiz
-      )
+    const userChallengeUpdated = await challengeService.updateUserChallenge(
+      userChallenge,
+      UserChallengeUpdateFlag.QUIZ_UPDATE,
+      userChallenge.quiz
+    )
     dispatch(updateUserChallengeList(userChallengeUpdated))
     navigate('/challenges')
   }

src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx

+import { render, waitFor } from '@testing-library/react'
 import { UserQuestionState } from 'enums'
-import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 import QuizQuestion from './QuizQuestion'
 
-const mockGetCustomQuestion = jest.fn()
 jest.mock('services/quiz.service', () => {
   return jest.fn(() => {
     return {
-      getCustomQuestion: mockGetCustomQuestion,
+      getCustomQuestion: jest.fn(),
     }
   })
 })
@@ -27,19 +25,17 @@ jest.mock(
 
 describe('QuizQuestion component', () => {
   const store = createMockEcolyoStore()
-  beforeEach(() => {
-    store.clearActions()
-  })
 
   it('should be rendered correctly with question', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <QuizQuestion userChallenge={userChallengeData[0]} />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(wrapper.find('mock-question').exists()).toBeTruthy()
-    expect(wrapper.find('mock-customQuestion').exists()).toBeFalsy()
+    expect(container.getElementsByTagName('mock-question').length).toBeTruthy()
+    expect(
+      container.getElementsByTagName('mock-customQuestion').length
+    ).toBeFalsy()
   })
 
   it('should be rendered correctly with customQuestion', async () => {
@@ -49,13 +45,15 @@ describe('QuizQuestion component', () => {
     updateUserChallengeData.quiz.questions.forEach(
       answer => (answer.result = UserQuestionState.CORRECT)
     )
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <QuizQuestion userChallenge={updateUserChallengeData} />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(wrapper.find('mock-question').exists()).toBeFalsy()
-    expect(wrapper.find('mock-customQuestion').exists()).toBeTruthy()
+    await waitFor(() => null, { container })
+    expect(container.getElementsByTagName('mock-question').length).toBeFalsy()
+    expect(
+      container.getElementsByTagName('mock-customQuestion').length
+    ).toBeTruthy()
   })
 })

src/components/Quiz/QuizQuestion/QuizQuestionContent.spec.tsx

-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
@@ -11,24 +12,22 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockedNavigate,
 }))
 
-const mockUpdateUserQuiz = jest.fn()
 jest.mock('services/quiz.service', () => {
   return jest.fn(() => ({
-    updateUserQuiz: mockUpdateUserQuiz,
+    updateUserQuiz: jest.fn(),
   }))
 })
 
-const mockUserChallengeUpdateFlag = jest.fn()
 jest.mock('services/challenge.service', () => {
   return jest.fn(() => ({
-    updateUserChallenge: mockUserChallengeUpdateFlag,
+    updateUserChallenge: jest.fn(),
   }))
 })
 
 describe('QuizQuestionContent component', () => {
   const store = createMockEcolyoStore()
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <QuizQuestionContent
           userChallenge={userChallengeData[0]}
@@ -37,13 +36,13 @@ describe('QuizQuestionContent component', () => {
         />
       </Provider>
     )
-    expect(wrapper.find('.question').text()).toEqual(
-      userChallengeData[0].quiz.questions[0].questionLabel
-    )
-    expect(wrapper.find('input')).toHaveLength(3)
+    expect(
+      screen.getByText(userChallengeData[0].quiz.questions[0].questionLabel)
+    ).toBeInTheDocument()
+    expect(screen.getAllByRole('radio').length).toBe(3)
   })
-  it('should redirect to challenge on click on btn-back', () => {
-    const wrapper = mount(
+  it('should redirect to challenge on click on btn-back', async () => {
+    render(
       <Provider store={store}>
         <QuizQuestionContent
           userChallenge={userChallengeData[0]}
@@ -52,8 +51,7 @@ describe('QuizQuestionContent component', () => {
         />
       </Provider>
     )
-
-    wrapper.find('.btn-back').first().simulate('click')
+    await userEvent.click(screen.getAllByRole('button')[0])
     expect(mockedNavigate).toHaveBeenCalledWith('/challenges')
   })
 })

src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx

-import Button from '@material-ui/core/Button'
-import Loader from 'components/Loader/Loader'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { questionEntity } from 'tests/__mocks__/quizData.mock'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
 import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import QuizExplanationModal from '../QuizExplanationModal/QuizExplanationModal'
 import QuizQuestionContentCustom from './QuizQuestionContentCustom'
 
 const mockHistoryPush = jest.fn()
@@ -18,25 +16,23 @@ jest.mock('react-router-dom', () => ({
 }))
 
 const mockUpdateUserQuiz = jest.fn()
-const mockGetCustomQuestion = jest.fn()
 jest.mock('services/quiz.service', () => {
   return jest.fn(() => ({
     updateUserQuiz: mockUpdateUserQuiz,
-    getCustomQuestion: mockGetCustomQuestion,
+    getCustomQuestion: jest.fn(),
   }))
 })
 
-const mockUserChallengeUpdateFlag = jest.fn()
 jest.mock('services/challenge.service', () => {
   return jest.fn(() => ({
-    updateUserChallenge: mockUserChallengeUpdateFlag,
+    updateUserChallenge: jest.fn(),
   }))
 })
 
 describe('QuizCustomQuestionContent component', () => {
   const store = createMockEcolyoStore()
-  it('should be rendered correctly', () => {
-    const wrapper = mount(
+  it('should be rendered correctly', async () => {
+    const { container } = render(
       <Provider store={store}>
         <QuizQuestionContentCustom
           userChallenge={userChallengeData[0]}
@@ -46,17 +42,13 @@ describe('QuizCustomQuestionContent component', () => {
         />
       </Provider>
     )
-    wrapper.find('.btn-back').forEach(node => {
-      node.simulate('click')
-    })
+    await userEvent.click(screen.getAllByRole('button')[0])
     expect(mockHistoryPush).toHaveBeenCalledWith('/challenges')
-    expect(wrapper.find('.question').text()).toEqual(
-      questionEntity.questionLabel
-    )
-    expect(wrapper.find('input')).toHaveLength(3)
+    expect(screen.getByText(questionEntity.questionLabel)).toBeInTheDocument()
+    expect(screen.getAllByRole('radio').length).toBe(3)
   })
   it('should be rendered correctly with loader', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <QuizQuestionContentCustom
           userChallenge={userChallengeData[0]}
@@ -66,10 +58,12 @@ describe('QuizCustomQuestionContent component', () => {
         />
       </Provider>
     )
-    expect(wrapper.find(Loader).exists()).toBeTruthy()
+    expect(
+      container.getElementsByClassName('question-loading')[0]
+    ).toBeInTheDocument()
   })
-  it('should display QuizExplanationModal when click on Button', () => {
-    const wrapper = mount(
+  it('should display QuizExplanationModal when click on Button', async () => {
+    const { container } = render(
       <Provider store={store}>
         <QuizQuestionContentCustom
           userChallenge={userChallengeData[0]}
@@ -79,21 +73,12 @@ describe('QuizCustomQuestionContent component', () => {
         />
       </Provider>
     )
-    const answer = questionEntity.answers[0].answerLabel
-    wrapper
-      .find({ type: 'radio' })
-      .at(0)
-      .simulate('change', { target: { value: answer } })
-
-    expect(wrapper.find(Button).exists()).toBeTruthy()
-    wrapper.find('.btnSecondary').forEach(node => {
-      node.simulate('click')
-    })
+    await userEvent.click(screen.getAllByRole('radio')[0])
+    await userEvent.click(screen.getAllByRole('button')[1])
     expect(mockUpdateUserQuiz).toHaveBeenCalledWith(
       userChallengeData[0].quiz,
       questionEntity.answers[0].isTrue
     )
-    expect(wrapper.find(QuizExplanationModal).exists()).toBeTruthy()
-    expect(wrapper.find(QuizExplanationModal).prop('open')).toBeTruthy()
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
   })
 })

src/components/Quiz/QuizView.spec.tsx

+import { render } from '@testing-library/react'
 import QuizView from 'components/Quiz/QuizView'
 import { UserQuizState } from 'enums'
-import { mount } from 'enzyme'
 import { ChallengeState } from 'models'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { challengeStateData } from 'tests/__mocks__/challengeStateData.mock'
 import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
 import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import QuizBegin from './QuizBegin/QuizBegin'
-import QuizFinish from './QuizFinish/QuizFinish'
-import QuizQuestion from './QuizQuestion/QuizQuestion'
 
 jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
 jest.mock('components/Header/Header', () => 'mock-header')
@@ -29,12 +26,14 @@ describe('QuizView component', () => {
       challenge: updatedChallengeState,
       global: mockGlobalState,
     })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <QuizView />
       </Provider>
     )
-    expect(wrapper.find(QuizBegin).exists()).toBeTruthy()
+    expect(
+      container.getElementsByClassName('quiz-begin-container')[0]
+    ).toBeInTheDocument()
   })
 
   it('should be rendered with QuizQuestion component when quiz state = ongoing', () => {
@@ -50,12 +49,14 @@ describe('QuizView component', () => {
       challenge: updatedChallengeState,
       global: mockGlobalState,
     })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <QuizView />
       </Provider>
     )
-    expect(wrapper.find(QuizQuestion).exists()).toBeTruthy()
+    expect(
+      container.getElementsByClassName('question-container')[0]
+    ).toBeInTheDocument()
   })
 
   it('should be rendered with QuizFinish component when quiz state = done', () => {
@@ -71,12 +72,14 @@ describe('QuizView component', () => {
       challenge: updatedChallengeState,
       global: mockGlobalState,
     })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <QuizView />
       </Provider>
     )
-    expect(wrapper.find(QuizFinish).exists()).toBeTruthy()
+    expect(
+      container.getElementsByClassName('quiz-finish-container')[0]
+    ).toBeInTheDocument()
   })
 
   it('should be rendered with QuizBegin component when quiz state = null', () => {
@@ -91,11 +94,13 @@ describe('QuizView component', () => {
       challenge: updatedChallengeState,
       global: mockGlobalState,
     })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <QuizView />
       </Provider>
     )
-    expect(wrapper.find(QuizBegin).exists()).toBeTruthy()
+    expect(
+      container.getElementsByClassName('quiz-begin-container')[0]
+    ).toBeInTheDocument()
   })
 })