DEV Community: Manuela Viola

How to Test React Native Apps

Manuela Viola — Thu, 23 Jun 2022 20:06:49 +0000

Introduction

Have you ever had a bug introduced by solving another problem and didn't realize it until weeks later? This could have been easily avoided if you had tests for your App.

In a project with a tight schedule, tests are generally the first thing to be forgone, but they are being underestimated. Once you make that click and understand how to create tests, it's not that complicated to add them and avoid future problems.

Overview

In this article, you will learn how to test React Native Apps using jest and @testing-library/react-native.

About @testing-library/react-native

One important thing to point out is that this testing library has changed many times and migrations were needed from one version to another. This tutorial will work with the latest version at the time of writing it (7.0.1). For migrations, you can check their migration guide.

App to be tested

For this tutorial, we are going to use this simple app, but of course, you can apply everything learned in any app you want. In this app, we just have two simple screens with some components we can test.

Configuration

Since we are going to use the @testing-library/react-native library, we need to install it. To use the specific 7.0.1 version we can install it like this:
npm install @testing-library/react-native@7.0.1

We also need to configure jest. We should create a jest.config.js file in the projects root folder and for our example, we can fill it with this content:

module.exports = {
  preset: 'react-native',
  modulePathIgnorePatterns: ['extras'],
  setupFiles: [
    '<rootDir>/node_modules/react-native-gesture-handler/jestSetup.js',
  ],
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?react-native|react-(native|universal|navigation)-(.*)|@react-native-community/(.*)|@react-navigation/(.*)|bs-platform|@rootstrap/redux-tools)',
  ],
  verbose: true,
};

I will mention some of these configurations later in this tutorial and you can find more information here.

Tests folder

As you can see, our project already has a __tests__ folder with an App-test.js file inside. This tests if the app is created and rendered correctly.

Creating tests

To actually create a test, we should create a file with a .spec.js extension inside the __tests__ folder. We could even add folders inside to better organize the tests, for example, add a folder called screens and have one test per screen inside.

Inside these tests, we are going to use describe() just to describe what we want to test, it() (same as test()) to create the tests we want to have, expect() to assert our expected behavior and beforeEach() to execute some code before each it() test. Here is a complete list of jest methods to use inside tests.

Correspondingly, we use the @testing-library/react-native library to test our components behavior. We could use fireEvent to fire a button pressed event or waitFor() to wait for promises results. Here is a cheat sheet with the possible methods to use.

Notice that to know how to ask for a specific component, we can simply add the testID="componentId" property to the component we want to identify. To simplify, I already added this property to all the components we are testing.

Creating tests for our App

Now we need to create our own tests, so we can test our MainScreen and SecondaryScreen. We can create the screens folder inside the __tests__ folder to have better organized tests.

Also, we are going to need some extra files to handle navigation and screen parameters data, so we can create an extras folder inside the __tests__ folder for this purpose. If you paid attention you may have noticed that we added modulePathIgnorePatterns: ['extras'] to the jest.config.js file. This is to tell jest to ignore the .js files that this folder contains, otherwise, it will consider them as tests and we don't want that.

Navigation helper

To test our app we need to start on some screen. If we use a simple render AppStack we would always start on the same screen and we would need to have some flow to go to a different one. To avoid this, we could just start our stack with the screen we want and if we need to test our screen redirecting to some other screen we just need to add that other screen to the stack for the test to work.

Keeping this in mind, we will create a helpers.js file inside the extras folder that looks like this:

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {render} from '@testing-library/react-native';

const Stack = createStackNavigator();

const renderOtherComponents = (otherComponents, screenConfig = {}) => {
  return otherComponents.map(({name, component}) => {
    return (
      <Stack.Screen
        {...screenConfig}
        key={name}
        name={name}
        component={component}
      />
    );
  });
};

export const renderWithNavigation = (
  mainComponent,
  {otherComponents = [], navigatorConfig = {}, screenConfig = {}} = {},
) => {
  const App = () => (
    <NavigationContainer>
      <Stack.Navigator {...navigatorConfig}>
        <Stack.Screen
          {...screenConfig}
          name="TestNavigator"
          component={mainComponent}
        />
        {otherComponents &&
          renderOtherComponents(otherComponents, screenConfig)}
      </Stack.Navigator>
    </NavigationContainer>
  );

  return {...render(<App />)};
};

We will get more into detail when we use it in the SecondaryScreen test.

MainScreen test

Inside the screens folder, we should create the MainScreen.spec.js file.

Since we are in the AppStack's first screen we can just render the entire AppStack and it would start rendering the screen we want.

This file should test the MainScreen components existence and behavior:

It renders the MainScreen component
It renders the button-to-secondary-screen component
When pressing button-to-secondary-screen component, it redirects to the SecondaryScreen component
It renders the alert-button component
When pressing alert-button component, it shows an alert

Each of these items should translate to an it() jest method and so our MainScreen.spec.js file should look like this:

import {act, fireEvent, waitFor} from '@testing-library/react-native';
import {Alert} from 'react-native';
import AppStack from '../../src/navigators/AppStack';

import {renderWithNavigation} from '../extras/helpers';

describe('<MainScreen />', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = renderWithNavigation(AppStack);
  });

  it('should render the main screen', () => {
    expect(wrapper.queryByTestId('MainScreen')).toBeTruthy();
  });

  it('should render the go to secondary screen button', () => {
    expect(wrapper.queryByTestId('button-to-secondary-screen')).toBeTruthy();
  });

  describe('when go to secondary screen button is pressed', () => {
    it('it should render SecondaryScreen ', async () => {
      act(() => {
        fireEvent.press(wrapper.queryByTestId('button-to-secondary-screen'));
      });
      await waitFor(() =>
        expect(wrapper.queryByTestId('SecondaryScreen')).toBeTruthy(),
      );
    });
  });

  it('should render the alert button', () => {
    expect(wrapper.queryByTestId('alert-button')).toBeTruthy();
  });

  describe('when take alert button is pressed', () => {
    it('it should render an Alert ', async () => {
      const alertSpy = jest.spyOn(Alert, 'alert');
      act(() => {
        fireEvent.press(wrapper.queryByTestId('alert-button'));
      });
      await waitFor(() => expect(alertSpy).toHaveBeenCalled());
    });
  });
});

SecondaryScreen test

Inside the screens folder we should create the SecondaryScreen.spec.js file.

Since we are not in the AppStack's first screen and our screen receives parameters, we are going to take advantage of the helper we created. We will call the function renderWithNavigation with these parameters:

mainComponent: SecondaryScreen
otherComponents: [{name: 'MainScreen', component: MainScreen}]
screenConfig: {initialParams: { screenParameters }}

We will create a data.js file inside the extras folders to set our screenParameters:

export const screenParameters = {
  paramOne: 'This is a parameter that is a text',
  paramTwo: {
    content: 'This is a parameter that is an object with a content',
  },
};

This file should test the SecondaryScreen components existence and behavior:

It renders the SecondaryScreen component
It renders the back-button component
When pressing back-button component, it redirects to the MainScreen component
It renders the title component
It renders the param-one component
It renders the param-two-content component

Notice that our param-one and param-two-content only render if they have content to render, so if our tests pass means that the screen is getting the parameters right!

Our SecondaryScreen.spec.js file should look like this:

import {act, fireEvent, waitFor} from '@testing-library/react-native';

import {screenParameters} from '../extras/data';
import {renderWithNavigation} from '../extras/helpers';
import SecondaryScreen from '../../src/screens/SecondaryScreen';
import MainScreen from '../../src/screens/MainScreen';

describe('<SecondaryScreen />', () => {
  let wrapper;

  const otherComponents = [{name: 'MainScreen', component: MainScreen}];

  beforeEach(() => {
    wrapper = renderWithNavigation(SecondaryScreen, {
      otherComponents,
      screenConfig: {
        initialParams: screenParameters,
      },
    });
  });

  it('should render SecondaryScreen', () => {
    expect(wrapper.queryByTestId('SecondaryScreen')).toBeTruthy();
  });

  it('should render the go back button', () => {
    expect(wrapper.queryByTestId('back-button')).toBeTruthy();
  });

  describe('when go back button is pressed', () => {
    it('it should render MainScreen ', async () => {
      act(() => {
        fireEvent.press(wrapper.queryByTestId('back-button'));
      });
      await waitFor(() =>
        expect(wrapper.queryByTestId('MainScreen')).toBeTruthy(),
      );
    });
  });

  it('should render title', () => {
    expect(wrapper.queryByTestId('title')).toBeTruthy();
  });

  it('should render param one', () => {
    expect(wrapper.queryByTestId('param-one')).toBeTruthy();
  });

  it('should render param two content', () => {
    expect(wrapper.queryByTestId('param-two-content')).toBeTruthy();
  });
});

Running tests

To run the tests we just simply need to execute npm test. This command will run all the tests we have under the __tests__ folder. If we want to just run one particular test, we can do npm test __tests__/screens/one_particular_test.js instead.

We can see how our tests run successfully:

Debugging tests

If we want to debug our tests we can use ndb.

To use this, first, we need to install it, as the documentation explains, by running npm install ndb and you can add the -g option to make it global.

Then, we can configure our project by setting the value "test:debug": "ndb jest", inside our package.json file under the "scripts" section (we can put it right after the "test" value).

Finally, we can debug our tests by running npm run test:debug and this will install Chromium where you will be able to set breakpoints in your tests and debug them.

Mocks

Since our app was really simple, we didn't need to implement mocks, but it's really an important part of testing react native apps. I will explain why we need them and how we can create them.

The first thing you need to know is that there are lots of functionalities you will have to mock in order to use and test. For this purpose, you can create a __mocks__ folder inside the __tests__ one. Every file in there will be named after a react native library, so when you are testing something that uses that library, jest will take and use the implementation made in the mock.

Let's exemplify. Suppose that in our project we have a backend we access through a URL that we have saved in an .env file with the name API_URL and we use the library react-native-config to access that information. Our tests won't be able to access that .env file, so instead, we have to mock it. We would create (if we haven't already) the __mocks__ folder and inside we would create a file named react-native-config.js that contains the URL we want, like this:

export default {
  API_URL: 'https://mock.com/api'
};

A slightly more complex example would be if we use an ImagePicker to access our photos gallery. Let's say we use the react-native-image-crop-picker library and in our code we call ImagePicker.openPicker() expecting a selected image as a result. If our test calls the button that opens the picker expecting a selected image as a result but we don't have the picker mocked, our test would fail, getting a null result, which is not what we expected. So, we have to create our react-native-image-crop-picker.js file and inside we could have something like this:

export default {
  openPicker: jest.fn().mockImplementation(() => Promise.resolve(result))
};

What we are doing here is mocking our openPicker function, by saying it is a function (jest.fn()) and that its mocked implementation would be Promise.resolve(result). Notice that since our real openPicker is a promise, our mocked implementation is also a promise. We can decide if we want our mocked promise to be completed successfully (with Promise.resolve()) or if we want it to fail (with Promise.reject()). We also decide if we want to return something, like in this case, we are returning result. A question you might be asking is, how do I test both fail and success results by only mocking one openPicker function? Well, the answer is quite simple actually, and it would look like this:

export default {
  openPicker: jest
    .fn(() => Promise.resolve(result)) // default implementation
    .mockImplementationOnce(() => Promise.reject(result)) // first time is called
    .mockImplementationOnce(() => Promise.resolve(result)), // second time is called
};

By using the method mockImplementationOnce() we can give different behaviors to our function, depending on each time you call it. So in this case, the first time we call it we would get a rejected promise (for example to mock that we don't have access to the gallery yet), the second time would be a successful case with our expected result and if we were to call it more times it would use the default implementation inside the fn() method, which in this case would also be successful.

Summary

In this tutorial, we saw how to use jest and @testing-library/react-native to test React Native Apps. You can find the complete GitHub project (with tests included) here.

Read this article and more content in the Rootstrap blog: https://www.rootstrap.com/blog/how-to-test-react-native-apps/

How to customize fonts in React Native

Manuela Viola — Thu, 23 Jun 2022 19:38:27 +0000

Introduction

At Rootstrap, my first assignment was to develop a React Native application, that involved maps, chat, and following the design specifications to the letter. While doing this, one of the first things I tried was to set the family font that the application uses, and I found out it wasn't as easy as I expected.

The biggest issue was that all the tutorials said to execute react-native link, which in my experience was a bad idea because afterwards the application stopped building successfully. This occurs because since React Native 0.60 released, there is a property called Autolinking that changed how to link a library, as this post explains.

Overview

In this tutorial, you will learn how to add and link fonts manually, without using the link command.

First, you will see all the configurations that need to be done to use custom fonts and then you will learn its usage in a simple application.

Configuration

Create Project

First of all, you should create a project in react native. To do that, open the terminal and navigate to the folder you want to create your project in, and execute:

react-native init customize_fonts_react_native_tutorial

Install libraries

After creating the project, some libraries need to be installed:

cd customize_fonts_react_native_tutorial
npm install --save react-native-global-props
npm install --save babel-plugin-module-resolver

Download and rename fonts

Since this is a tutorial about customizing fonts, you will need to have some fonts downloaded, in order to add them to your React Native project.

There are many places where you can get these customized fonts. For this tutorial, I used two different fonts, GoodFeelingSans and Dan'sDisney. In both cases, I ended up with a .ttf file.

In iOS, it is important for the font filename to be the same as its PostScript name. To find the PostScript name, open your ttf file with Font Book, see what its PostScript name is and rename the font to it.

Configurations in React Native

To use your custom fonts in a React Native project, each platform requires a different configuration, but there are also some general configurations all platforms need.

General

In both cases, you will need to create these folders in your project's root: src/assets/fonts. Inside the fonts folder, you should add you custom fonts .ttf files, one for every font you want to use.

Also, modify babel.config.js adding this code:

plugins: [
    [
      'module-resolver',
      {
        alias: {
          assets: './src/assets',
        },
      },
    ],
  ],

Android

In Android, you need to add this folders into android/app/src/main/ : assets/fonts. You should also add your ttf files to the fonts folder.

iOS

In iOS, the configuration is a little more tricky. You need to go to ios/ folder and open the
customize_fonts_react_native_tutorial.xcodeproj file with Xcode.

Afterwards, you need to press on customize_fonts_react_native_tutorial -> Build Phases and find the Copy Bundle Resources section.

You should add your fonts by pressing the plus symbol, then Add Other... option, select your fonts from your src/assets/fonts folder and Finish.

Usage

Finally, after all these steps you will be able to use customized fonts in your React Native project.

As an example, you can create a very simple screen, just to test everything is configured correctly. Add in src folder App.js and styles.js files.

App.js:

import React from 'react';
import {SafeAreaView, Text, TextInput} from 'react-native';
import {setCustomText, setCustomTextInput} from 'react-native-global-props';
import styles from './styles';

const App = () => {
  const customTextProps = {
    style: {
      fontFamily: 'GoodFeelingSans',
    },
  };

  setCustomText(customTextProps);
  setCustomTextInput(customTextProps);

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.header}>How to Customize Fonts in React Native</Text>
      <Text style={styles.textDefaultFont}>
        This is the default font (GoodFeelingSans)
      </Text>
      <Text style={styles.textDifferentFont}>
        This is a different font (DansDisneyUI)
      </Text>
      <TextInput value="This input has default font" />
      <TextInput
        value="This input has a different font"
        style={styles.inputDifferentFont}
      />
    </SafeAreaView>
  );
};

export default App;

styles.js:

import {StyleSheet} from 'react-native';

const differentFont = "Dan'sDisneyUI";

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'space-around',
  },

  header: {
    fontSize: 18,
    fontWeight: 'bold',
    margin: 15,
    textAlign: 'center',
  },

  inputDifferentFont: {
    fontFamily: differentFont,
  },

  textDefaultFont: {
    fontSize: 16,
    marginVertical: 15,
    textAlign: 'center',
  },

  textDifferentFont: {
    fontFamily: differentFont,
    fontSize: 16,
    marginVertical: 15,
    textAlign: 'center',
  },
});

export default styles;

Also modify index.js to point to new ./src/App instead of ./App.

In this app, you are using the react-native-global-props library to set a custom font as default, in case you have an entire app with some default font. This is not necessary if you don't need it, you can just set the custom font only in the texts you want. Note how you can still do this even if you define a default custom font. Also note that there are two different default settings, one for the Text component and another for the TextInput.

Now, if you execute react-native run-ios or react-native run-android you should see the text with your custom fonts.

iOS "Unrecognized font family" error

After following all these steps, if you are getting the very common Unrecognized font family error, there are still some things you can check or do.

First, you should check your info.plist file, located in the ios/customize_fonts_react_native_tutorial folder. This file must have a section with key UIAppFonts that contains an array of strings with your fonts. If this is missing, then you should add this:

<key>UIAppFonts</key>
    <array>
        <string>GoodFeelingSans.ttf</string>
        <string>Dan'sDisneyUI.ttf</string>
    </array>

If your project has multiple build targets, you should apply this change to their respective info.plist files.

After this, if you are still getting the error, you could try doing some (or all) of the things listed below:

Uninstall app from simulator (or device)
Delete node_modules folder, package-lock.json file and execute npm install
In ios folder delete Pods folder, Podfile.lock file and execute pod install
Reset cache by runnning npm start --reset-cache command

I hope after doing all this, you now have your new custom fonts working!

Summary

In this tutorial, you learned how to add, link and use custom fonts in React Native. You can find the GitHub project here.

Read this article and more content in the Rootstrap blog: https://www.rootstrap.com/blog/how-to-customize-fonts-in-react-native/

How to customize fonts in React Native

Manuela Viola — Mon, 12 Oct 2020 19:08:15 +0000

Introduction

Overview

In this tutorial, you will learn how to add and link fonts manually, without using the link command.

First, you will see all the configurations that need to be done to use custom fonts and then you will learn its usage in a simple application.

Configuration

Create Project

First of all, you should create a project in react native. To do that, open the terminal and navigate to the folder you want to create your project in, and execute:

react-native init customize_fonts_react_native_tutorial

Install libraries

After creating the project, some libraries need to be installed:

cd customize_fonts_react_native_tutorial
npm install --save react-native-global-props
npm install --save babel-plugin-module-resolver

Download and rename fonts

Since this is a tutorial about customizing fonts, you will need to have some fonts downloaded, in order to add them to your React Native project.

There are many places where you can get these customized fonts. For this tutorial, I used two different fonts, GoodFeelingSans and Dan'sDisney. In both cases, I ended up with a .ttf file.

Configurations in React Native

To use your custom fonts in a React Native project, each platform requires a different configuration, but there are also some general configurations all platforms need.

General

Also, modify babel.config.js adding this code:

plugins: [
    [
      'module-resolver',
      {
        alias: {
          assets: './src/assets',
        },
      },
    ],
  ],

Android

In Android, you need to add this folders into android/app/src/main/ : assets/fonts. You should also add your ttf files to the fonts folder.

iOS

In iOS, the configuration is a little more tricky. You need to go to ios/ folder and open the
customize_fonts_react_native_tutorial.xcodeproj file with Xcode.

Afterwards, you need to press on customize_fonts_react_native_tutorial -> Build Phases and find the Copy Bundle Resources section.

You should add your fonts by pressing the plus symbol, then Add Other... option, select your fonts from your src/assets/fonts folder and Finish.

Usage

Finally, after all these steps you will be able to use customized fonts in your React Native project.

As an example, you can create a very simple screen, just to test everything is configured correctly. Add in src folder App.js and styles.js files.

App.js:

import React from 'react';
import {SafeAreaView, Text, TextInput} from 'react-native';
import {setCustomText, setCustomTextInput} from 'react-native-global-props';
import styles from './styles';

const App = () => {
  const customTextProps = {
    style: {
      fontFamily: 'GoodFeelingSans',
    },
  };

  setCustomText(customTextProps);
  setCustomTextInput(customTextProps);

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.header}>How to Customize Fonts in React Native</Text>
      <Text style={styles.textDefaultFont}>
        This is the default font (GoodFeelingSans)
      </Text>
      <Text style={styles.textDifferentFont}>
        This is a different font (DansDisneyUI)
      </Text>
      <TextInput value="This input has default font" />
      <TextInput
        value="This input has a different font"
        style={styles.inputDifferentFont}
      />
    </SafeAreaView>
  );
};

export default App;

styles.js:

import {StyleSheet} from 'react-native';

const differentFont = "Dan'sDisneyUI";

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'space-around',
  },

  header: {
    fontSize: 18,
    fontWeight: 'bold',
    margin: 15,
    textAlign: 'center',
  },

  inputDifferentFont: {
    fontFamily: differentFont,
  },

  textDefaultFont: {
    fontSize: 16,
    marginVertical: 15,
    textAlign: 'center',
  },

  textDifferentFont: {
    fontFamily: differentFont,
    fontSize: 16,
    marginVertical: 15,
    textAlign: 'center',
  },
});

export default styles;

Also modify index.js to point to new ./src/App instead of ./App.

Now, if you execute react-native run-ios or react-native run-android you should see the text with your custom fonts.

iOS "Unrecognized font family" error

After following all these steps, if you are getting the very common Unrecognized font family error, there are still some things you can check or do.

<key>UIAppFonts</key>
    <array>
        <string>GoodFeelingSans.ttf</string>
        <string>Dan'sDisneyUI.ttf</string>
    </array>

If your project has multiple build targets, you should apply this change to their respective info.plist files.

After this, if you are still getting the error, you could try doing some (or all) of the things listed below:

Uninstall app from simulator (or device)
Delete node_modules folder, package-lock.json file and execute npm install
In ios folder delete Pods folder, Podfile.lock file and execute pod install
Reset cache by runnning npm start --reset-cache command

I hope after doing all this, you now have your new custom fonts working!

Summary

In this tutorial, you learned how to add, link and use custom fonts in React Native. You can find the GitHub project here.

If you liked it, you can check this and more articles in Rootstrap's blog