Updated April 1, 2023
Introduction to React Native Testing
As we know that building a cross-platform mobile application is very easy to React Native. Quality of the application is always a top priority when it comes to building a business application, to meet this quality, the testing of the application is very important. To find issues and bugs faster in the mobile application and to solve them even faster, automation testing is used. Although there are great challenges that are faced by the testers while testing React Native based mobile applications, these are like, very complex setup, dealing with the application’s permissions, recognizing view elements. and shared state.
Different Types of React Native Testing
Here are the different types of React Native testing mentioned below.
1. Unit testing
Unit testing is a basic kind of testing for mobile apps. JavaScript objects and methods present at the component level are tested with it.
2. Component testing
Each component is tested functionally and visually with Component Testing. ReactTestUtils provides a simple framework to test the React Components.
3. Integration testing
A group of units are considered as one component and are tested together in Integration Testing.
4. Functional testing
Functional Testing is a blackbox testing that focuses on the requirements and interactions of the user. User Interactions and the software of the app are covered as a single entity.
Major React Native Testing Tools
Here are the Major tools and how testing is performed through them:
1. Jest
It’s a JavaScript framework for testing. It solves the issues in the Javascript. This is a framework that helps us in writing tests and these tests are very much approachable and also include feature-rich API. It is documented over nicely and fewer configurations are needed.
It has been developed by Facebook and works with React-Native. Snapshot Testing is also included in Jest.
Steps to perform:
Setup
The configuration that will be added to the package.json file automatically:
"scripts": {
"test": "jest"
},
"jest": {
"preset": "react-native"
}Snapshot Test
Below is a snapshot test for a small component that has some views, text components and some styles.
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native'; const styles = StyleSheet.create({
container: { alignItems: 'center',
backgroundColor: '#F5FCFF', flex: 1,
justifyContent: 'center',
},
instructions: { color: '#333333',
marginBottom: 5, textAlign: 'center',
},
welcome: { fontSize: 20,
margin: 10, textAlign: 'center',
},
});
export default class Intro extends Component { render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>
</Text>
</View>
);
}
}Using React’s test renderer and Jest’s snapshot failure for interacting with the components and capturing the output which creates a snapshot file:
import React from 'react';
import Intro from '../Intro';
import renderer from 'react-test-renderer';
test('renders correctly', () => {
const tree = renderer.create(<Intro />).toJSON();
expect(tree).toMatchSnapshot();
});After running a yarn or jest, below is an example of the output file:
exports[`Intro renders correctly 1`] = `
<View
style={ Object {
"alignItems": "center", "backgroundColor": "#F5FCFF", "flex": 1,
"justifyContent": "center",
}
}>
<Text
style={
Object { "fontSize": 20,
"margin": 10, "textAlign": "center",
}
}>
Hello React Native!
</Text>
<Text
style={ Object {
"color": "#333333",
"marginBottom": 5, "textAlign": "center",
}
}>
A snapshot test for React Native.
</Text>
</View>
`;2. Enzyme
The enzyme is a JavaScript testing tool used for testing various React components and check the output produced. After getting the output, we can traverse, manipulate and simulate the runtime.
Simulation of React Components like jQuery and DOM can be done using Enzyme. It also checks the Props or children of the components and can also shallow render the components.
Setting up Jest and Enzyme:
Firstly, we will add both Jest and Enzyme to the React app:
npm install --save-dev jest
npm install --save-dev enzyme enzyme-adapter-react-15
Now install the Jest Enzyme package to use both of them together.
npm install --save-dev jest-enzyme
// in app/src/setupTests.js
fileconst Enzyme = require('enzyme')
const EnzymeAdapter = require('enzyme-adapter-react-15')
Enzyme.configure({ adapter: new EnzymeAdapter() });Now let’s begin to write the tests. We will test a Login Component:
Import shallow to mock the component in DOM. Only shallow will be used right now as we don’t require test interaction between this component and any other one.
import shallow from 'enzyme';
import Login from '../Login';
Let’s see how to select parts of the code to test.
import React from 'react';
class Login extends React.Component {constructor() { super()
this.state = { username: '', password: ''
}
}handleInputChange = (event) => { this.setState({
[event.target.name]: event.target.value
})
}render() { return (
<form className='login'>
<label>Username</label>
<input id='email' onChange={this.handleInputChange} name='email' type='text' />
<label>Password</label>
<input id='password' onChange={this.handleInputChange} name='password' type='password' />
<button>Submit</button>
</form>
)
}
}export default LoginNow, we will write the describe function to describe the testing objective and then will write about the behavior of the components.
import React from 'react';
import shallow from 'enzyme';
import Login from '../Login'// describe what we are testing describe('Login Component', () => {
it('must render without throwing an error', () => { expect(shallow(<Login />).find('form.login').exists()).toBe(true)
})
})
it('renders a email input', () => {
expect(shallow(<Login />).find('#email').length).toEqual(1)
})
it('renders a password input', () => {
expect(shallow(<Login />).find('#password').length).toEqual(1)
})
describe('Email input', () => {
it('must respond to change event and change in the state of the Login Component', () => {
const wrapper = shallow(<Login />); wrapper.find('#email').simulate('change', {target: {name: 'email', value: '[email protected]'}});
expect(wrapper.state('email')).toEqual('[email protected]');
})
})
describe('Password input', () => {
it('must respond to change event and change in state of the Login Component', () => {
const wrapper = shallow(<Login />);
wrapper.find('#password').simulate('change', {target: {name: 'password', value: 'cats'}});
expect(wrapper.state('password')).toEqual('cats');
})
})Output:
Conclusion
On the basis of the above discussion, we got to know about the different types of testing in React-Native and the major tools of React Native to perform testing. Testing is very much important to provide the best quality for the mobile application. To fix the issues and bugs faster, automation testing is used. As one can develop cross-platform applications very easily using React Native, but there are some challenges faced for the testing of React Native based applications and to solve these challenges, testing like unit testing, component testing, integration testing, and functional testing are used.
Recommended Articles
This is a guide to React Native Testing. Here we discuss the different types of React Native testing along with the Major Tools to perform testing. You may also look at the following articles to learn more –
