Jest for React Native

This is an article on how to setup jest in react-native with support for vscode.

The base setup of react-native
npx react-native init unittest

Installing the additional dependencies
yarn add --dev @testing-library/react-native @testing-library/jest-native

Extend your jest config in package.json,

{ "preset": "react-native", "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"] } 

You're ready to write unit test cases for react-native, let's setup your vscode.

Intellisense is important for code completion, create a jsconfig.json file in your project root directory.
Add the following contents in it.

{ "typeAcquisition": { "include": [ "jest" ] } } 

Install types to support autocompletion.
yarn add @types/jest

Lets add a plugin to vscode, which makes testing easier, Jest Test Explorer

Let's write some test cases.
Create a folder structure as below,

A Sample React Native component, Banner.js

import React from 'react'; import {View, Text} from 'react-native' const Banner = () => { return ( <View> <Text>Banner</Text> </View> ) } export default Banner; 

A Sample test file for the component, Banner.test.js

import React from 'react' import { render } from '@testing-library/react-native'; import Banner from './Banner' describe('Banner', () => { it('renders correctly', () => { const { getByText } = render(<Banner />) const textField = getByText('Banner') expect(textField).toBeDefined() }); }) 

After adding the file, you can see three options in your file, This provides us the ability to validate a single test case without having to write special commands, debug them.

It also gives us a look at the tree structure of all the test cases in your project and run them as a whole.

So its a wrap, Hope you find this useful and effective to work with.

Talk to me on twitter droidmakk