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:
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
Top comments (0)