This is Part VI of my series, Using Jest and Testing Library with React Native. Below, you will find the series outline. Take a look and catch up on anything you’ve missed.

Seriers Outline:

• Part I: Setting Up
• Part II: Writing the First Test
• Part III: Testing for an Element That Isn’t Present
• Part IV: Button Testing
• Part V: Testing Styles of a Component
• Part VI: Functional Testing – Current Article
• Part VII: Further Helpful Information

In our last tutorial, we went over style testing. In this tutorial, we will go over functional testing for your React Native app.

Let’s Begin

Here is our App.js code so far:

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

const App = () => {
  return (
    <View style={styles.body} testID='body'>
      <View style={styles.sectionContainer}>
       <Text style={styles.sectionTitle}>Hello World</Text>
      </View>

      <Button
        title="Press me!"
        onPress={() => {}}
        testID="pressMeButton"
        accessibilityLabel="Press me"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  body: {
    backgroundColor: '#ffffff',
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: '#000000',
  },
});

export default App;

Adding useState

For our functional testing, we will be using the useState hook. We will add a component that is toggled on or off with useState hook.

Declaring useState and Adding a Component To Be Toggled

Let’s update App.js to use the useState hook to toggle a component.

First, let’s import the useState hook.

//...
import React, {useState} from "react";
//...

You don’t have to use object deconstruction to get useState. You could also access it with react: React.useState.

Let’s declare an initial state of isToggled and set the default value to false.

//...
const App = () => {
  const [isToggled, setIsToggled] = useState(false);
  //...
};
//...

Next, we will add the component that we will toggle.

{isToggled && (
  <Text>I am the toggled component</Text>
)}

&& is a short-hand in JavaScript. If isToggled is set to true, it will render the text. If it’s set to false, it won’t. It’s easy to think of it as a shorthand if. This can also be a ternary.

Toggle Component

Remember the Press Me! button we tested in Part IV? Well, we’re going to use that here to toggle the component.

Update onPress on the button.

<Button
  title='Press me!'
  onPress={() => setIsToggled(!isToggled)}
  testID='pressMeButton'
  accessibilityLabel='Press me'
/>

Now, start your app!

You should see this:

Press the Press Me! button

You should now see this:

Awesome! Now we have something functional to test!

Adding a Functional Test

Before we add our functional test, let’s write a test to ensure our toggled component can’t be found.

This time, you should write the test! We’ve run through the process many times throughout this series. You got this! I will be waiting …

While I’m waiting …

How are you doing?

I hope you are doing good.

I think I am doing good.

I am just words :D.

By the way, you’re doing great!

Keep up the good work!

Okay, have you finished? Are you ready to see my version of the test? If not, stop here.

….
….
….
….

Alright, let’s try it. Run your test!

Did it pass? I bet it did! If it didn’t, don’t worry. Jest should have given you some clues on why it didn’t.

Let’s compare our tests! Here’s mine.

it('should not find the toggled component', () => {
    const hiddenToggledText = 'I am the toggled component';

    const {queryByText} = render(<App/>);

    const notFoundHiddenComponent = queryByText(hiddenToggledText);

    expect(notFoundHiddenComponent).toBeFalsy();
  });

Something new we have seen above is toBeFalsy. Basically toBeFalsy checks if it is false in some way. I could have used toBeNull in place of this as well. I could have also used testID to test if the toggled component was not found.

Alright, now it’s time to write the function test.

Firt, we have to import fireEvent from @testing-library/react-native.

import { cleanup, render, fireEvent } from "@testing-library/react-native";

Now, it’s time to add a test with using fireEvent.

it('should find the toggled component', () => {
  const testIdName = 'pressMeButton';
  const toggledText = 'I am the toggled component';

  const { getByTestId, getByText } = render(<App />);

  const foundButton = getByTestId(testIdName);

  fireEvent.press(foundButton);

  const foundToggledText = getByText(toggledText);

  expect(foundToggledText.props.children).toEqual(toggledText);
});

Run the tests!

You should see something like:

Functional test in the bag!

Depending on the functionality you want to test, there are different ways to write a test. The example above is one that you can build on and use to create more specific tests that meet your needs.

Summary

Alright, so to wrap up, in the post, we started by discussing how to use useState hook to hide a component. Then, we toggled the component using onPress and tested that toggled component. Finally, we used fireEvent in a test to make sure that toggle component was showing.

Thanks for reading, and I really hope this post was helpful! We only have one post left in our series. Make sure you check it out to learn some handy facts and features of Jest that I couldn’t quite squeeze in.