myButton.test.js

import { render, screen, fireEvent } from '@testing-library/react-native';
import MyButton from '../components/myButton';
import React, { useRef } from 'react';

// jest.mock("react", () => {
//     return {
//         ...jest.requireActual('react'),
//         useRef: jest.fn()
//     }
// });

describe('Basic testing of MyButton', () => {
  test("MyButton must bind it's children correctly", () => {
    render(<MyButton>Click</MyButton>);

    let btn = screen.getByTestId('btn');
    expect(btn).toHaveTextContent('Click');
  });

  test('MyButton must be pressable', () => {
    const handlePress = jest.fn();
    render(<MyButton onPress={handlePress}>Click</MyButton>);
    let btn = screen.getByTestId('btn');
    fireEvent(btn, 'onPress');
    expect(handlePress).toHaveBeenCalledTimes(1);
  });

  test('MyButton must apply the styles given in style attribute.', () => {
    render(<MyButton style={{ baackgroundColor: 'yellow' }}>Click</MyButton>);
    let btn = screen.getByTestId('btn');
    expect(btn).toHaveStyle({ baackgroundColor: 'yellow' });
  });

  test('MyButton must apply textStyle Properly', () => {
    render(<MyButton textStyle={{ color: 'white' }}>Click</MyButton>);
    let btn = screen.getByTestId('btn');
    expect(btn.children[0]).toHaveStyle({ color: 'white' });
  });
});

describe('MyButton Animation Tests.', () => {
  beforeEach(() => {
    jest.useFakeTimers();
  });
  test('MyButton must have a RippleCircle Animated View', () => {
    render(<MyButton>Click</MyButton>);
    let rippleCircle = screen.getByTestId('rippleCircle');
    expect(rippleCircle._fiber.elementType).toBe('View');
  });

  test.only('MyButton RippleCircle must move to the position where clicked. ', () => {
    render(<MyButton>Click</MyButton>);
    let btn = screen.getByTestId('btn');
    let rippleCircle = screen.getByTestId('rippleCircle');
    expect(rippleCircle).toHaveStyle({ left: -5, top: -5 });

    fireEvent(btn, 'onPressIn', {
      nativeEvent: { locationX: 10, locationY: 15 },
    });

    jest.advanceTimersByTime(500);
    rippleCircle = screen.getByTestId('rippleCircle');
    expect(rippleCircle).toHaveAnimatedStyle({ left: 5, top: 10 });
  });

  test.skip('RippleCircle initial Opacity & Scale must be 0. ', () => {
    render(<MyButton>Click</MyButton>);

    let rippleCircle = screen.getByTestId('rippleCircle');
    expect(rippleCircle).toHaveAnimatedStyle({
      opacity: 0,
      transform: [{ scale: 0 }],
    });
  });

  test("With press in RippleCircle must scale to fit button width with it's opacity must grow to 1.", () => {
    const ref = { current: {} };

    Object.defineProperty(ref, 'current', {
      set(value) {
        this._current = value;
        if (
          this._current &&
          this._current.props &&
          this._current.props.testID === 'btn'
        ) {
          this._current.offsetWidth = 100;
        }
      },
      get() {
        return this._current;
      },
    });

    jest.spyOn(React, 'useRef').mockReturnValue(ref);

    render(<MyButton>Click</MyButton>);
    let btn = screen.getByTestId('btn');
    let rippleCircle = screen.getByTestId('rippleCircle');
    fireEvent(btn, 'onPressIn', {
      nativeEvent: { locationX: 10, locationY: 15 },
    });
    //fireEvent(btn, "onPressIn");
    // jest.runAllTimers();

    //  expect(rippleCircle).toHaveAnimatedStyle({ opacity: 1, transform: [{ scale: 20 }] });

    //   let rippleCircle = screen.getByTestId("rippleCircle");
    // fireEvent(rippleCircle, "onPressIn", { nativeEvent: { locationX: 10, locationY: 15 } });
  });
});