Beginners Guide to Get Started with Unit Testing in React Native

Beginners Guide to Get Started with Unit Testing in React Native

In this article, we will be looking at the basic principles of unit tests with a simple react-native Button component.

Automated tests give you confidence in the piece of code you write. Sometimes we write code that works locally then push to production. However, changes made breaks entirely different parts of the project. 

Someone else on your team might have written these parts of the project, but your changes caused conflicts. Testing prevents this.

There are different types of tests: unit tests, integration tests, functional tests, end-to-end tests, and many more.

What is unit testing?

Using a car as an analogy, we all know that a car comprises of different components (Unless you live in a tree 🤪). These components comprise wheels, an engine, headlights, and taillights, etc.

Unit tests basically ensure each individual component performs as expected. Looking at our car analogy, to ensure our wheel is perfectly round we rotate it by exerting external force, same way we write unit tests to ensure individual components of our source code (software) function as they ought to.

In this article, we will be looking at the basic principles of unit tests with a simple react-native Button component.

Let’s go ahead to create a Button component.

import React from 'react';
import {Pressable, Text, View, StyleSheet} from 'react-native';

const Button = ({onPress, title, isLoading, transparent}) => {
  return (
    <Pressable
      onPress={() => {
        if (!isLoading) {
          return onPress();
        }
      }}>
      <View style={transparent ? styles.transparentBtn : styles.btn}>
        <Text style={transparent ? styles.transparentTitle : styles.title}>
          {isLoading ? 'Loading...' : title}
        </Text>
      </View>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  btn: {
    width: '100%',
    height: 50,
    backgroundColor: '#74B3CE',
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 10,
    borderRadius: 4,
  },
  transparentBtn: {
    width: '100%',
    height: 50,
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 10,
  },
  title: {
    color: 'white',
    fontSize: 16,
  },
  transparentTitle: {
    color: '#74B3CE',
  },
});

export default Button;

react-native unit-testing test-automation introduction react getting-started jest enzyme

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Unit Testing With Jest in Javascript,  — React

When you want to test some of your React components using Jest unit testing, there are a few extra steps that should be taken to ensure proper testing is completed. I would suggest reading part one to the series here before continuing on so that you get the basic knowledge and learn how to set things up before moving forward with this article.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Why do you need Unit Testing in React Native application (Video Tutorial)?

React Native Tutorial: How Can You Start with Unit Tests? Start it right now - save your time in the future. 1. Link to the article - https://2muchcoffee.com...

Top 10 Automation Testing Tools: 2020 Edition

The demand for delivering quality software faster — or “Quality at Speed” — requires organizations to search for solutions in Agile, continuous integration (CI), and DevOps methodologies. Test automation is an essential part of these aspects.