gist.component.spec.tsx

gist.component.spec.tsx

import React from 'react'
import { render } from '@testing-library/react'
import { Gists } from './gists.component'

describe('gists.component', () => {
  it('should show only the error message if fetching failed', async () => {
    const useGists: any = jest.fn(() => [null, 'this is the error'])
    const { getByText, queryByText } = render(<Gists useGists={useGists} />)
    await getByText('this is the error')
    expect(queryByText('Prev')).toBe(null)
    expect(queryByText('Next')).toBe(null)
    expect(useGists).toHaveBeenCalledTimes(1)
  })

  it('should show loading state', async () => {
    const useGists: any = jest.fn(() => [null])
    const { getByText, queryByText } = render(<Gists useGists={useGists} />)
    await getByText('Loading gists page 1')
    expect(queryByText('Prev')).toBe(null)
    expect(queryByText('Next')).toBe(null)
    expect(useGists).toHaveBeenCalledTimes(1)
  })

  it('should show gists', async () => {
    const useGists: any = jest.fn(() => [[{ url: 'this is url' }]])
    const { getByText, queryByText } = render(<Gists useGists={useGists} />)
    await getByText('this is url')
    expect(queryByText('Next')).not.toBe(null)
    expect(queryByText('Prev')).toBe(null)
    expect(useGists).toHaveBeenCalledTimes(1)
  })
})