React Native Starter
Search…
Testing
This part describes, how you can improve your app's stability with different testing tools
Unit Testing
The first and the most popular option is unit-testing of your JavaScript modules. React Native Starter comes with ready-to-use Jest integration, which you can use to test components, classes and functions.
Let's talk about testing each of them.
Testing Views
The best way to test if your views are rendered correctly is to create a view snapshot and compare the new snapshots each time. This way you can see when your views are changing or not.
Let's pretend you have a button component that can take a string or an image as a children component and calls onPress handler when TouchableOpacity inside this component is clicked. So your button component looks something like this:
components/Button.js
1
export const Button = ({ children, onPress }) => (
2
<View style={styles.container}>
3
<TouchableOpacity onPress={onPress}>
4
{children}
5
</TouchableOpacity>
6
</View>
7
);
Copied!
And what you want to test here are that:
- 1.Button renders correctly with image and with a text.
- 2.
onPresshandler is fired when TouchableOpacity has been pressed.
Let's create a test file called
Button.spec.js. By default, jest looks for all the files named as *.spec.js, *.test.js and for files placed under the __tests__ folder.components/Button.spec.js
1
import React from 'react';
2
// Import enzyme's shallow renderer
3
import { shallow } from 'enzyme';
4
​
5
// Describes a test group
6
describe('Button', () => {
7
it('renders correctly with a text', () => {
8
// Render our button with a text inside
9
const wrapper = shallow(<Button>test</Button>);
10
​
11
// Check that the rendered button matches
12
// previously saved snapshot
13
expect(wrapper).toMatchSnapshot();
14
});
15
​
16
it('renders correctly with an image', () => {
17
// Render our button with an image inside
18
const wrapper = shallow(
19
<Button>
20
<Image src={require('something')} />
21
</Button>,
22
);
23
​
24
// Check that the rendered button matches
25
// previously saved snapshot
26
expect(wrapper).toMatchSnapshot();
27
});
28
​
29
it('handles onPress', () => {
30
// Create a mock function to pass as a handler
31
const onPress = jest.fn();
32
​
33
// Render our button with an image inside
34
const wrapper = shallow(<Button onPress={onPress}>test</Button>);
35
​
36
// Find a TouchableOpacity and press it
37
wrapper
38
.find('TouchableOpacity')
39
.first()
40
.props()
41
.onPress();
42
​
43
// Check that our handler have been called 1 time
44
expect(onPress).toHaveBeenCalledTimes(1);
45
});
46
});
47
​
Copied!
End to end testing
We integrated Detox framework for running end2end tests for your app. We also integrated it with jest, so you can write your tests in the familiar environment.
​
High velocity native mobile development requires us to adopt continuous integration workflows, which means our reliance on manual QA has to drop significantly. Detox tests your mobile app while it's running in a real device/simulator, interacting with it just like a real user.
The most difficult part of automated testing on mobile is the tip of the testing pyramid - E2E. The core problem with E2E tests is flakiness - tests are usually not deterministic. We believe the only way to tackle flakiness head on is by moving from black box testing to gray box testing. That's where Detox comes into play.
- Cross Platform: Write cross-platform tests in JavaScript. Currently supports iOS, Android is nearly complete. View the Android status page.
- Runs on Devices (not yet supported on iOS): Gain confidence to ship by testing your app on a device/simulator just like a real user.
- Automatically Synchronized: Stops flakiness at the core by monitoring asynchronous operations in your app.
- Made For CI: Execute your E2E tests on CI platforms like Travis without grief.
- Test Runner Independent: Use Mocha, AVA, or any other JavaScript test runner you like.
- Debuggable: Modern async-await API allows breakpoints in asynchronous tests to work as expected.
Let's pretend you want to test your that your login flow works and verify it with Detox.
First, create a file called
login.spec.js under the e2e folder and add the following code there:e2e/login.spec.js
1
describe('Login flow', () => {
2
it('should login successfully', async () => {
3
await device.reloadReactNative();
4
await expect(element(by.id('email'))).toBeVisible();
5
6
await element(by.id('email')).typeText('[email protected]');
7
await element(by.id('password')).typeText('123456');
8
await element(by.text('Login')).tap();
9
10
await expect(element(by.text('Welcome'))).toBeVisible();
11
await expect(element(by.id('email'))).toNotExist();
12
});
13
});
Copied!
Then, simply open your console and type
1
e2e:build && e2e:test
Copied!
That's it! You should see the iOS simulator opened and your app tested.
Last modified 2yr ago
Copy link