ChallengeView.spec.tsx

import React from 'react'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
import ChallengeView from 'components/Challenge/ChallengeView'
import * as reactRedux from 'react-redux'
import { challengeStateDataFull } from '../../../tests/__mocks__/challengeStateData.mock'
import {
  createMockStore,
  mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'

const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')

jest.mock('cozy-ui/transpiled/react/I18n', () => {
  return {
    useI18n: jest.fn(() => {
      return {
        t: (str: string) => str,
      }
    }),
  }
})

jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
jest.mock('components/Header/Header', () => 'mock-header')
jest.mock('components/Content/Content', () => 'mock-content')
jest.mock('components/Challenge/ChallengeCard', () => 'mock-challengecard')

const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector')

describe('ChallengeView component', () => {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  let store: any
  beforeEach(() => {
    store = createMockStore(mockInitialEcolyoState)
    useSelectorSpy.mockClear()
  })

  it('should be rendered correctly', () => {
    mockUseSelector.mockReturnValue(challengeStateDataFull)
    const wrapper = mount(
      <reactRedux.Provider store={store}>
        <ChallengeView />
      </reactRedux.Provider>
    )
    expect(toJson(wrapper)).toMatchSnapshot()
  })
})