Unsubscribe.spec.tsx

import { render, screen, waitFor } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import React from 'react'
import Unsubscribe from './Unsubscribe'

const mockUpdateProfile = jest.fn().mockResolvedValue('')
jest.mock('services/profile.service', () => {
  return jest.fn(() => ({
    updateProfile: mockUpdateProfile,
  }))
})

describe('Unsubscribe component', () => {
  it('should be rendered correctly', async () => {
    const { container } = render(<Unsubscribe />)
    await waitFor(() => null, { container })
    expect(container).toMatchSnapshot()
  })

  it('should click the subscribe button', async () => {
    const { container } = render(<Unsubscribe />)
    await waitFor(() => null, { container })
    await userEvent.click(screen.getByText('unsubscribe.button_subscribe'))
    expect(mockUpdateProfile).toHaveBeenCalled()

    // then should only display one button
    const buttons = screen.getAllByRole('button')
    expect(buttons.length).toBe(1)
  })
})