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'schangeText
- Pressing a button could be achieved using the Button driver's press function.
#
How to use the testkits#
Initializing the driverIn order to initialize a test driver you pass it the renderTree and the component's testId as an object.
#
ExampleSuppose 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 '@wix/wix-react-native-ui-lib';
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:- Import the TextField and Button driver from UI-LIB's testkit
import {TextFieldDriver, ButtonDriver} from '@wix/react-native-ui-lib/testkit';
- render our test case
const renderTree = render(<MyForm onSubmit={onSubmit}/>);
- 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'});
- Change the text of the fields and submit the form.
firstNameDriver.changeText('Musa');lastNameDriver.changeText('The Man');addressDriver.changeText('Yunitzman 5');submitBtnDriver.press();
- 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'); });});