 |
Objective:
Every time we make any changes to our applications, we need to do a considerable amount of manual testing for both iOS and Android platforms. Our objective is to prepare an automated regression test suite for react-native applications that will cover major functionality.
Framework:
Jest:
Jest is a JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node.js, React, Angular and Vue.js. It aims to work out of the box and config free.
React Test Renderer:
This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. Essentially, this package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a React DOM or React Native component without using a browser or jsdom.
React Component:
React lets us define components as classes or functions. Components defined as classes currently provide more features which are described in detail on this page. To define a React component class, you need to extend React.Component:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}}
The only method you must define in a React.Component subclass is called render(). All the other methods described on this page are optional.
Test React Component:
Currently we are writing test for the components if it's affected by conditional statement (if else). For and example:
<Button
style={{
padding: 16,
backgroundColor: disabled ? 'white' : 'black',
flexDirection: 'row'
}}
/>
test('test button background color if disabled',()=>{
const testRenderer = TestRenderer.create(<Button/>);
const testInstance = testRenderer.root;
const button = testInstance.findByType(Button);
const buttonStyle = button.props.style;
expect(buttonStyle.backgroundColor).toBe('#FFFFFF');
})
We are not writing any test for default style of the components(Which doesn't have any logic). For an example,
<Button
style={{
padding: 16,
backgroundColor: 'black',
flexDirection: 'row'
}}
/>
Note: You can find more details about the test guideline here:
Resource:
All the mobile test team will be involved in the automation scripting.
Out of Scope:
Device-specific testing: Like rendering of UI on different OS (Android and iOS). OS-specific like issues, to recall any iOS upgrade.
WebView related Testing:
Any non-functional testing:
Limitation:
Resource Limitation:
All the members of the mobile team have knowledge of Java. So everyone needs to be familiar with JavaScript as we are using the Jest framework. Also, need to be familiar with the react component.
Technology Limitation:
We can not perform testing on physical devices. (We are not sure if this is possible)
Not Everything can be automated.
Current Progress:
Currently, we are writing unit tests for react components across products. So far, we are able to manage 37.54% of the overall components. We will try to achieve max % unit test coverage for react components. But there are few components with animation and some components which required re-factoring.
Milestone:
We divided our milestone in 2 steps. In step 1, we will try to gain 80% unit test code coverage for the react component. And in step 2, we will try to cover all the functional testing for our product.
Milestone 1: Component Unit Test
Milestone 2: Screen Functionality Test
Test Report:
We will get the test report from the scheduled build from BuildKite or any other CI/CD. The test report will trigger once a day through the Slack channel. From the report, we will show the below information.
