How to have different returns from the same mock with React Native + Jest

1. Scenario

Let's imagine a react-native scenario where you have a component that has a text for users with active subscription and another text for users with inactive subscription.

Like the image below:

2. Dependencies

Make sure you have jest (min version 27.0.0) and react testing library for react native installed and updated.

If you don't, run the command below:

yarn add jest @testing-library/react-native @types/jest -D

3. Implementation

This is how our function that returns if the user has a active subscription is implemented (but let's imagine that it is an endpoint or a library function).

export const auth = () => {
  return {
    user: {
      name: 'John Doe',
      email: '[e-mail]',
      isSubscriptionActive: false,
    },
  };
};

And this is how our component SubscriptionCard looks like:

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {auth} from '../../services/api';

const SubscriptionCard = () => {
  const isSubscriptionActive = auth().user.isSubscriptionActive;
  return (
    <View style={styles.container}>
      <Text testID="subscription-card-label" style={styles.text}>
        {isSubscriptionActive ? 'Active' : 'Not Active'}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 48,
    borderRadius: 16,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#1565C0',
  },
  text: {
    fontWeight: 'bold',
    fontSize: 24,
    color: '#fff',
  },
});

export default SubscriptionCard;

So we need to test if the text is "Active" when the auth() functions return isSubscriptionActive: true and "Not Active" when isSubscriptionActive: false.

For that, i will create a file named SubscriptionCard.spec.tsx

The first thing we need to do is use jest.mock in the path (or library name) of the function that we are using:

jest.mock('../../services/api');

Now, we need to write the "skeleton" of our tests

describe('SubscriptionCard component', () => {
  it('text should be "Active" if subscription is active', () => {

  });

  it('text should be "Not Active" if subscription is not active', () => {

  });
});

So now we just need to individually mock the return of auth() function like this:

    const authMocked = mocked(auth as any);

    authMocked.mockReturnValue({
      user: {
        isSubscriptionActive: true,
      },
    });

For the first test

And like this:

    const authMocked = mocked(auth as any);

    authMocked.mockReturnValue({
      user: {
        isSubscriptionActive: true,
      },
    });

For the second one.

And then we can call the expect function that we are testing, giving this final result:

import {render} from '@testing-library/react-native';
import React from 'react';
import {mocked} from 'jest-mock';
import SubscriptionCard from '.';
import {auth} from '../../services/api';

jest.mock('../../services/api');

describe('SubscriptionCard component', () => {
  it('text should be "Active" if subscription is active', () => {
    const authMocked = mocked(auth as any);

    authMocked.mockReturnValue({
      user: {
        isSubscriptionActive: true,
      },
    });

    const {getByTestId} = render(<SubscriptionCard />);
    const cardText = getByTestId('subscription-card-label');

    expect(cardText.children[0]).toBe('Active');
  });

  it('text should be "Not Active" if subscription is not active', () => {
    const authMocked = mocked(auth as any);

    authMocked.mockReturnValue({
      user: {
        isSubscriptionActive: false,
      },
    });

    const {getByTestId} = render(<SubscriptionCard />);
    const cardText = getByTestId('subscription-card-label');

    expect(cardText.children[0]).toBe('Not Active');
  });
});

Github repository