tooot/__tests__/components/Button.js

import React from 'react'
import {
  toBeDisabled,
  toHaveStyle,
  toHaveTextContent
} from '@testing-library/jest-native'
import { cleanup, fireEvent, render } from '@testing-library/react-native/pure'

import Button from '@components/Button'

expect.extend({ toBeDisabled, toHaveStyle, toHaveTextContent })

describe('Testing component button', () => {
  afterEach(cleanup)

  describe('static button', () => {
    it('with text only', () => {
      const onPress = jest.fn()
      const { getByTestId, toJSON } = render(
        <Button type='text' content='Test Button' onPress={onPress} />
      )
      fireEvent.press(getByTestId('base'))

      expect(onPress).toHaveBeenCalled()
      expect(onPress).toHaveBeenCalledTimes(1)
      expect(getByTestId('text')).toHaveTextContent('Test Button')
      expect(toJSON()).toMatchSnapshot()
    })

    it('with icon only', () => {
      const onPress = jest.fn()
      const { getByTestId, toJSON } = render(
        <Button type='icon' content='X' onPress={onPress} />
      )
      fireEvent.press(getByTestId('base'))

      expect(onPress).toHaveBeenCalled()
      expect(onPress).toHaveBeenCalledTimes(1)
      expect(toJSON()).toMatchSnapshot()
    })

    it('loading state', () => {
      const { getByTestId, toJSON } = render(
        <Button type='text' content='test' onPress={jest.fn()} loading />
      )

      expect(getByTestId('base')).toBeDisabled()
      expect(toJSON()).toMatchSnapshot()
    })

    it('disabled state', () => {
      const { getByTestId, toJSON } = render(
        <Button type='text' content='test' onPress={jest.fn()} disabled />
      )

      expect(getByTestId('base')).toBeDisabled()
      expect(toJSON()).toMatchSnapshot()
    })

    it('apply custom styling', () => {
      const { getByTestId, toJSON } = render(
        <Button
          type='text'
          content='test'
          onPress={jest.fn()}
          style={{ backgroundColor: 'black' }}
        />
      )

      expect(getByTestId('base')).toHaveStyle({ backgroundColor: 'black' })
      expect(toJSON()).toMatchSnapshot()
    })
  })

  describe('dynamic button', () => {
    it('from default to loading', () => {
      const onPress = jest.fn()
      const { getByTestId, rerender } = render(
        <Button type='text' content='test' onPress={onPress} />
      )
      rerender(<Button type='text' content='test' onPress={onPress} loading />)

      expect(getByTestId('base')).toBeDisabled()
    })

    it('from default to disabled', () => {
      const onPress = jest.fn()
      const { getByTestId, rerender } = render(
        <Button type='text' content='test' onPress={onPress} />
      )
      rerender(<Button type='text' content='test' onPress={onPress} disabled />)

      expect(getByTestId('base')).toBeDisabled()
    })
  })
})