How to use react-native-testing-library - 10 common examples

it('* theme switching checks', () => {
    const application: RenderAPI = render();
    fireEvent(application.getByType(Button), 'press');
    const { output } = shallow(application.getByType(ApplicationProvider));

    const stringify = (obj: any): string => {
      return JSON.stringify(obj);
    };

    // @ts-ignore just for theme prop changing
    expect(stringify(output.props.theme)).toBe(JSON.stringify(themeInverse));
  });

test('changes font color', () => {
      const { getByType } = render();
      const root = getByType(Text);
      expect(StyleSheet.flatten(root.props.style)).not.toMatchObject({
        color: expect.any(String)
      });
      fireEvent(root, 'mouseEnter');
      expect(StyleSheet.flatten(root.props.style)).toMatchObject({
        color: Theme.Color.Primary40
      });
    });
  });

test('adds a bg color', () => {
      const { getByProps } = render();
      const root = getByProps({ accessibilityRole: 'link' });
      expect(StyleSheet.flatten(root.props.style)).not.toMatchObject({
        backgroundColor: expect.any(String)
      });
      fireEvent(root, 'mouseEnter');
      expect(StyleSheet.flatten(root.props.style)).toMatchObject({
        backgroundColor: Theme.Color.Primary00
      });
    });

beforeEach(() => {
      sendHandler = jest.fn();

      ({getByTestId} = render());

      fireEvent.changeText(getByTestId('messageText'), messageText);
      fireEvent.press(getByTestId('sendButton'));
    });

public fillAmount(amount: string) {
    const input = this.getInput();
    fireEvent.changeText(input, amount);
  }

beforeEach(() => {
      sendHandler = jest.fn();
      ({ getByTestId } = render());

      fireEvent.changeText(getByTestId('messageText'), messageText);
      fireEvent.press(getByTestId('sendButton'));
    });

it('* tab choose', () => {
    const onSelect = jest.fn();
    const component = render(
      
         <img style="{style}/">}
          title='Screen 1'
          selected={false}/&gt;
         <img style="{style}/">}
          title='Screen 2'
          selected={true}/&gt;
         <img style="{style}/">}
          title='Screen 3'
          selected={false}/&gt;

it('* should pass props to an icon component', () => {
    const component = render(
      ,
    );

    expect(component.getByTestId('custom-test-id')).toBeTruthy();
  });

it('* date changes', () => {
    const expectedDate: Date = new Date(2019, CURRENT_MONTH, 5);
    const application: RenderAPI = render();

    fireEvent.press(application.getAllByText('5')[0]);
    const { date } = application.getByType(Calendar).props;

    expect(date.toString()).toBe(expectedDate.toString());
  });

it('Checks Sample component passes correct text props', async () => {
  const text = 'Hello, World!';
  const component = render(
    ,
  );
  const textComponent = component.getByName('Text');
  expect(textComponent.props.children).toEqual(text);
});