How to have different returns from the same mock with React Native + Jest
Tags: javascript, react, jest
Published: 2022-03-24 21:58:46

## 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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgqn1exyzx65p6coemjd.png)


## 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:
 

``` shell
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).

``` typescript
export const auth = () => {
  return {
    user: {
      name: 'John Doe',
      email: 'johndoe@gmail.com',
      isSubscriptionActive: false,
    },
  };
};

```

And this is how our component SubscriptionCard looks like:

``` typescript
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:

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

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

``` typescript
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:

``` typescript
    const authMocked = mocked(auth as any);

    authMocked.mockReturnValue({
      user: {
        isSubscriptionActive: true,
      },
    });
```
For the first test

And like this:

``` typescript
    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:

``` typescript
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](https://github.com/juniorklawa/react-native-single-mocks-example)**