test(rtl): exploration

src/components/Exploration/ExplorationFinished.spec.tsx

-import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-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 { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 import ExplorationFinished from './ExplorationFinished'
 
+const mockNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}))
+
 describe('ExplorationFinished', () => {
   const store = createMockEcolyoStore()
-  it('should be rendered correctly', () => {
-    const wrapper = mount(
-      <Provider store={store}>
-        <ExplorationFinished userChallenge={userChallengeData[0]} />
-      </Provider>
-    )
-    expect(wrapper.find(StyledIcon).exists()).toBeTruthy()
-    expect(wrapper.find('.congratulation').exists()).toBeTruthy()
-    expect(wrapper.find('.exploration-earn').exists()).toBeTruthy()
-    expect(wrapper.find('.msg-success').text()).toEqual(
-      userChallengeData[0].exploration.message_success
-    )
-  })
-  it('should redirect to challenge on click on styledButton', () => {
-    const wrapper = mount(
+  it('should be rendered correctly and redirect on click', async () => {
+    const { container } = render(
       <Provider store={store}>
         <ExplorationFinished userChallenge={userChallengeData[0]} />
       </Provider>
     )
-    wrapper.find(Button).first().simulate('click')
+    expect(screen.getByRole('img')).toBeInTheDocument()
+    expect(container.getElementsByClassName('congratulation')[0]).toBeTruthy()
+    expect(container.getElementsByClassName('exploration-earn')[0]).toBeTruthy()
+    expect(
+      screen.getByText(userChallengeData[0].exploration.message_success)
+    ).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('button'))
+    expect(mockNavigate).toHaveBeenCalledWith(-1)
   })
 })

src/components/Exploration/ExplorationOngoing.spec.tsx

+import { render, screen } from '@testing-library/react'
 import ExplorationOngoing from 'components/Exploration/ExplorationOngoing'
-import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
 import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 
-const mockUserChallengeUpdateFlag = jest.fn()
-const mockIsChallengeDone = jest.fn()
 jest.mock('services/challenge.service', () => {
   return jest.fn(() => ({
-    updateUserChallenge: mockUserChallengeUpdateFlag,
-    isChallengeDone: mockIsChallengeDone,
+    updateUserChallenge: jest.fn(),
+    isChallengeDone: jest.fn(),
   }))
 })
 
 describe('ExplorationOngoing component', () => {
   it('should be rendered correctly', () => {
     const store = createMockEcolyoStore()
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <ExplorationOngoing userChallenge={userChallengeData[0]} />
       </Provider>
     )
+
     expect(
-      wrapper.find('.exploration-explanation > div').first().text()
-    ).toEqual(userChallengeData[1].exploration.description)
+      screen.getByText(userChallengeData[1].exploration.description)
+    ).toBeInTheDocument()
     expect(
-      wrapper.find('.exploration-explanation > div').last().text()
-    ).toEqual(userChallengeData[1].exploration.complementary_description)
-    expect(wrapper.find('.btnSecondary').exists()).toBeTruthy()
+      screen.getByText(
+        userChallengeData[1].exploration.complementary_description
+      )
+    ).toBeInTheDocument()
   })
 })

src/components/Exploration/ExplorationView.spec.tsx

+import { render } from '@testing-library/react'
 import { UserExplorationState } from 'enums'
-import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { challengeStateData } from 'tests/__mocks__/challengeStateData.mock'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
 import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import ExplorationError from './ExplorationError'
-import ExplorationFinished from './ExplorationFinished'
-import ExplorationOngoing from './ExplorationOngoing'
 import ExplorationView from './ExplorationView'
 
 jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
@@ -28,12 +25,14 @@ describe('ExplorationView', () => {
       currentChallenge: updatedUserChallenge,
     }
     const store = createMockEcolyoStore({ challenge: updatedChallengeState })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <ExplorationView />
       </Provider>
     )
-    expect(wrapper.find(ExplorationError).exists()).toBeTruthy()
+    expect(
+      container.getElementsByClassName('exploration-error-container')[0]
+    ).toBeInTheDocument()
   })
 
   it('should be rendered with ExplorationOngoing component when exploration state = unlocked', () => {
@@ -49,12 +48,14 @@ describe('ExplorationView', () => {
       currentChallenge: updatedUserChallenge,
     }
     const store = createMockEcolyoStore({ challenge: updatedChallengeState })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <ExplorationView />
       </Provider>
     )
-    expect(wrapper.find(ExplorationOngoing).exists()).toBeTruthy()
+    expect(
+      container.getElementsByClassName('exploration-begin-container')[0]
+    ).toBeInTheDocument()
   })
 
   it('should be rendered with ExplorationOngoing component when exploration state = ongoing', () => {
@@ -70,12 +71,14 @@ describe('ExplorationView', () => {
       currentChallenge: updatedUserChallenge,
     }
     const store = createMockEcolyoStore({ challenge: updatedChallengeState })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <ExplorationView />
       </Provider>
     )
-    expect(wrapper.find(ExplorationOngoing).exists()).toBeTruthy()
+    expect(
+      container.getElementsByClassName('exploration-begin-container')[0]
+    ).toBeInTheDocument()
   })
 
   it('should be rendered with ExplorationFinished component when exploration state = Done', () => {
@@ -91,11 +94,13 @@ describe('ExplorationView', () => {
       currentChallenge: updatedUserChallenge,
     }
     const store = createMockEcolyoStore({ challenge: updatedChallengeState })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <ExplorationView />
       </Provider>
     )
-    expect(wrapper.find(ExplorationFinished).exists()).toBeTruthy()
+    expect(
+      container.getElementsByClassName('exploration-finish')[0]
+    ).toBeInTheDocument()
   })
 })