some basic test cases for a React Native Button Component using Jest

Button.js

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

const Button = ({ onPress, title }) => (
  <TouchableOpacity onPress={onPress}>
    <Text>{title}</Text>
  </TouchableOpacity>
);

export default Button;

Button.test.js

Test Cases 1:

import React from 'react';
import { render} from '@testing-library/react-native';
import Button from './Button';

describe('Button Component', () => {
  it('renders correctly', () => {
    const { getByText } = render(<Button title="Click me" />);
    const buttonElement = getByText('Click me');
    expect(buttonElement).toBeTruthy();
  });
});

Test Cases 2:

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

describe('Button Component', () => {
  it('calls onPress function when clicked', () => {
    const onPressMock = jest.fn();
    const { getByText } = render(<Button title="Click me" onPress={onPressMock} />);
    const buttonElement = getByText('Click me');
    fireEvent.press(buttonElement);
    expect(onPressMock).toHaveBeenCalled();
  });
});

Test Cases 3:

import React from 'react';
import { render} from '@testing-library/react-native';
import Button from './Button';

describe('Button Component', () => {
  it('displays the correct title', () => {
    const { getByText } = render(<Button title="Submit" />);
    const buttonElement = getByText('Submit');
    expect(buttonElement).toBeTruthy();
  });
});

Test Cases 4:

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

describe('Button Component', () => {
it('renders disabled button', () => {
    const { getByText } = render(<Button title="Disabled" disabled />);
    const buttonElement = getByText('Disabled');
    expect(buttonElement).toBeTruthy();
    // Make sure the button is not clickable
    fireEvent.press(buttonElement);
    expect(onPressMock).not.toHaveBeenCalled();
  });
});

Test Cases 5:

import React from 'react';
import { render} from '@testing-library/react-native';
import Button from './Button';

describe('Button Component', () => {
it('applies custom styles', () => {
    const { getByText } = render(
      <Button title="Styled Button" style={{ backgroundColor: 'blue', color: 'white' }} />
    );
    const buttonElement = getByText('Styled Button');
    expect(buttonElement).toHaveStyle({ backgroundColor: 'blue', color: 'white' });
  });
});

Test Cases 6:

import React from 'react';
import { render} from '@testing-library/react-native';
import Button from './Button';

describe('Button Component', () => {
  it('renders correctly with loading state', () => {
    const { getByText, getByTestId } = render(<Button title="Submit" isLoading />);
    const buttonElement = getByText('Submit');
    const loadingIndicator = getByTestId('loading-indicator');
    expect(buttonElement).toBeTruthy();
    expect(loadingIndicator).toBeTruthy();
  });
});

Test Cases 7:

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

describe('Button Component', () => {
  it('handles long press correctly', () => {
    const onLongPressMock = jest.fn();
    const { getByText } = render(<Button title="Long Press" onLongPress={onLongPressMock} />);
    const buttonElement = getByText('Long Press');
    
    fireEvent(buttonElement, 'longPress');
    expect(onLongPressMock).toHaveBeenCalled();
  });
});

Test Cases 8:

import React from 'react';
import { render} from '@testing-library/react-native';
import Button from './Button';

describe('Button Component', () => {
  it('applies accessibility label', () => {
    const { getByText } = render(<Button title="Accessible Button" accessibilityLabel="accessible-button" />);
    const buttonElement = getByText('Accessible Button');
    
    expect(buttonElement).toHaveProp('accessibilityLabel', 'accessible-button');
  });
});