Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

March 24, 2022 09:58 pm GMT

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: '[email protected]',      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

Original Link: https://dev.to/juniorklawa/how-to-have-different-returns-from-the-same-mock-with-react-native-jest-3nf2

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To