Jest / @testing-library/react-native test examples

Button.test.js

import React from 'react';
import Button from '.';
import { AlertButton, SubmitButton } from '.';

import { fireEvent, render, wait } from '@testing-library/react-native';
import Icon from '../Icon';

const caption = 'Test button';
const color = '#f00f0f';
const accessibilityLabel = 'This is a test button';
const isDisableColor = '#dfdfdf'; //ios // android: #a1a1a1

describe('<Button>', () => {
  describe('as default', () => {
    const buttonCallbackFunction = jest.fn(() => null);
    const activeButton = render(
      <Button
        title={caption}
        color={color}
        onPress={buttonCallbackFunction}
        testID="button"
        accessibilityLabel={accessibilityLabel}
      />
    );
    const { getByTestId, queryAllByTestId, getByText } = activeButton;
    const button = getByTestId('button');

    it('Renders successfully', () => {
      expect(activeButton).toBeDefined();
    });

    it('renders correctly', () => {
      const activeButtonAsJson = activeButton.asJSON();
      expect(activeButtonAsJson).toMatchSnapshot();
    });

    it('Outputs the correct text', () => {
      expect(getByText(caption)).toBeTruthy();
    });

    it('Fires the assigned event on press', async () => {
      fireEvent.press(button);
      fireEvent.press(button);
      await wait(() =>
        expect(buttonCallbackFunction.mock.calls.length).toBe(2)
      );
    });

    it(`doesn't render an <Icon>`, () => {
      expect(queryAllByTestId('icon-image').length).toBe(0);
    });

    it('renders with color #f00f0f', () => {
      const whatIsThis = getByTestId('button').children[0];
      const backgroundColorOnTestElem =
        whatIsThis &&
        typeof whatIsThis !== 'string' &&
        whatIsThis.props.style.backgroundColor;
      expect(backgroundColorOnTestElem).toBe(color);
    });
  });

  describe('with <Icon>', () => {
    const buttonIcon = require('../../assets/icons/icon-easyuse-white.png');
    const buttonWithIcon = render(
      <Button
        icon={<Icon imageSource={buttonIcon} />}
        title={caption}
        color={color}
        onPress={() => {}}
        testID="button"
        accessibilityLabel={accessibilityLabel}
      />
    );
    const { getByTestId } = buttonWithIcon;
    const button = getByTestId('button');

    it('displays an icon', () => {
      expect(getByTestId('icon-image')).toBeTruthy();
    });

    it('displays the submit icon', () => {
      expect(getByTestId('icon-image').props.source.testUri).toMatch(
        /icon-easyuse/i
      );
    });
  });

  describe('in disabled/inactive state', () => {
    const buttonCallbackFunction = jest.fn(() => null);
    const disabledButton = () =>
      render(
        <Button
          title={caption}
          onPress={buttonCallbackFunction}
          color={color}
          testID="button"
          accessibilityLabel={accessibilityLabel}
          disabled={true}
        />
      );

    it('outputs the correct text', () => {
      const { getByText } = disabledButton();
      expect(getByText(caption)).toBeTruthy();
    });

    it(`doesn't fire event on press`, async () => {
      const { getByTestId } = disabledButton();
      const button = getByTestId('button');
      fireEvent.press(button);
      await wait(() =>
        expect(buttonCallbackFunction.mock.calls.length).toBe(0)
      );
    });

    it(`Shows correct color when disabled`, () => {
      const gotStyles = (el: any) => el.props && el.props.style;
      const { getByTestId } = disabledButton();
      const whatIsThis = getByTestId('button').children.find(gotStyles);
      const backgroundColorOnTestElem =
        whatIsThis &&
        typeof whatIsThis !== 'string' &&
        whatIsThis.props.style.backgroundColor;
      expect(backgroundColorOnTestElem).toBe(isDisableColor);
    });
  });

  describe('in alert/danger state', () => {
    const buttonCallbackFunction = jest.fn(() => null);
    const { getByText, getByTestId } = render(
      <AlertButton
        title={caption}
        onPress={buttonCallbackFunction}
        testID="button"
        accessibilityLabel={accessibilityLabel}
      />
    );

    it('displays the alert icon', () => {
      expect(getByTestId('icon-image').props.source.testUri).toMatch(
        /icon-alert/i
      );
    });

    it('displays correct title', () => {
      expect(getByText(caption)).toBeDefined();
    });
  });

  describe('as a submit button', () => {
    const buttonCallbackFunction = jest.fn(() => null);
    const { getByText, getByTestId } = render(
      <SubmitButton
        title={caption}
        onPress={buttonCallbackFunction}
        testID="button"
        accessibilityLabel={accessibilityLabel}
      />
    );

    it('displays correct title', () => {
      expect(getByText(caption)).toBeTruthy();
    });

    it('displays an icon', () => {
      expect(getByTestId('icon-image')).toBeTruthy();
    });

    it('displays the submit icon', () => {
      expect(getByTestId('icon-image').props.source.testUri).toMatch(
        /icon-submit/i
      );
    });
  });
});