Skip to main content

Testing

Testkits allows us to test components without knowing the internal implementation, making it easier to test and reduce over head from migrations and changes in implementation. For example:

  • Changing the input of a TextField component can be done using the driver's changeText
  • Pressing a button could be achieved using the Button driver's press function.

How to use the testkits​

Initializing the driver​

In order to initialize a test driver you pass it the renderTree and the component's testId as an object.

Example​

Suppose we have a form that takes a first name, last name and an address and we want to test the submitting of this form. Our form component will look something like this:

import {Button, TextField, View} from 'react-native-ui-lib/testkit';

type OnSubmitHandler = (firstName: string, lastName: string, address: string) => void;
const MyForm = (props: {onSubmit: OnSubmitHandler}) => {
  const {onSubmit} = props;
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <View>
      <TextField label="First name" onChangeText={(value) => setFirstName(value)} value={firstName}/>
      <TextField label="Last name" onChangeText={(value) => setLastName(value)} value={lastName}/>
      <TextField label="Address" onChangeText={(value) => setAddress(value)} value={address}/>
      <Button label="Submit" onPress={() => onSubmit(firstName, lastName, address)}/>
    </View>
  );
};

Testing our flow​

In order to test our flow we would do the following steps:​

  1. Import the TextField and Button driver from UI-LIB's testkit
import {TextFieldDriver, ButtonDriver} from 'react-native-ui-lib/testkit';
  1. render our test case
const renderTree = render(<MyForm onSubmit={onSubmit}/>);
  1. Initialize our drivers for the TextFields and submit button
const firstNameDriver = TextFieldDriver({renderTree, testID: 'firstName'});
const lastNameDriver = TextFieldDriver({renderTree, testID: 'lastName'});
const addressDriver = TextFieldDriver({renderTree, testID: 'address'});
const submitBtnDriver = ButtonDriver({renderTree, testID: 'submit'});
  1. Change the text of the fields and submit the form.
firstNameDriver.changeText('Musa');
lastNameDriver.changeText('The Man');
addressDriver.changeText('Yunitzman 5');
submitBtnDriver.press();
  1. Check that the correct values were passed to the submit handler
expect(onSubmit).toHaveBeenCalledWith('Musa', 'The Man', 'Yunitzman 5');
Full test
describe('My Form', () => {
  it('should submit MyForm with Musa The Man, Yunitzman 5', () => {
    const onSubmit = jest.fn();
    const renderTree = render(<MyForm onSubmit={onSubmit}/>);
    const firstNameDriver = TextFieldDriver({renderTree, testID: 'firstName'});
    const lastNameDriver = TextFieldDriver({renderTree, testID: 'lastName'});
    const addressDriver = TextFieldDriver({renderTree, testID: 'address'});
    const submitBtnDriver = ButtonDriver({renderTree, testID: 'submit'});
    firstNameDriver.changeText('Musa');
    lastNameDriver.changeText('The Man');
    addressDriver.changeText('Yunitzman 5');
    submitBtnDriver.press();
    expect(onSubmit).toHaveBeenCalledWith('Musa', 'The Man', 'Yunitzman 5');
  });
});