3 Easy Steps to Set Up React Native with TypeScript, Jest and Enzyme

Note: This article is outdated. For the 2019 update read „Using TypeScript With React Native“.

NOTE: If you want more articles like this, you might want to subscribe to my newsletter because you will get more content like this! 💌

In about 10 minutes you will have learned how to create a new React Native project with TypeScript. And you will be able to add Jest and Enzyme unit tests to any React Native project that includes TypeScript.

Note: This tutorial assumes that you have at least gone through the React Native Getting Started guide and set up the React Native CLI.
Another note: You can only do the first step and leave out the other steps to avoid the testing setup and get a React Native project with TypeScript. If you are new to Jest or Enzyme, check out this Jest tutorial or this Enzyme tutorial as well as their respective documentation.

React Native recently released version 0.57 which provides TypeScript support out of the box 🙌🏻. Even though TypeScript support is included, you still have to do a bit of manual setup to get it working correctly with Jest and Enzyme.

In this blog post, I will guide you through the three easy steps for creating a new project that utilizes TypeScript and also includes Jest and Enzyme. If you already have a project with TypeScript and just want to add Enzyme and Jest, skip to step two. Let’s go!

Note: If you get an error at any point, check the GitHub repository here with commits for each step, or reach out to me on Twitter.

1. Initialize the React Native Project

First, we create a new project using Emin Khateeb’s TypeScript template.

react-native init myapp -package "your.bundle.identifier" --template typescript && node myapp/setup.js && cd myapp/

Swap out myapp for your project’s name and insert your bundle identifier. If you are wondering about the -package "your.bundle.identifier" option, it sets the bundle identifier correctly right away. If you have no clue what a bundle identifier is or what yours is going to be, leave the option out.

2. Add Testing Packages

After we initialized the project, let’s add the testing tools.

npm install --save-dev enzyme enzyme-adapter-react-16 react-dom jest-fetch-mock ts-jest

We don’t have to install Jest, because React Native ships with it. Hooray for Facebook enforcing the best practice of unit testing 🔥!
Additionally, we have to add types to unleash the full power of TypeScript.

npm install --save-dev @types/enzyme @types/enzyme-adapter-react-16

If you want to use Git, modify your .gitignore to ignore Jest’s files:

If you were to run the app right now, it would be broken. Read on to learn how to fix it 🎓!

3. Configure Jest and Enzyme

Now we want to set up the configuration files for Jest and Enzyme. Create a folder in your project’s root directory called tests/ and create a file called setup.js in it.

This file tells Enzyme to use the adapter for React 16 and tells Jest to automatically mock fetch.

We also need to configure Jest with TypeScript. Again in your root directory create a file called tsconfig.jest.json.

This files will let Jest correctly process TypeScript.

Lastly, we need to modify the Jest settings in package.json, so it knows about the new files. There should already be a key called Jest.
Replace it with the following code:

That’s it. We are good to go now 👏🏻!

Next I want to test if my setup is working correctly. If you’d like to join me, keep reading!

(Optional) 4 a). Test the Setup

When it comes to the folder structure, I like to have my components in a directory called app and put App.tsx in the root of it. Let’s do that now. Create a folder called app/ and move App.tsx into it. Now we also need to modify index.js to point to the new location of App.tsx.

Create a file called App.test.tsx. In it, we will add a simple unit test that checks if the <View /> component exists.

Now run npm test and you should get this output:

Success! 🤓

Awesome! Testing works, too. You can delete App.test.tsx now, if you want.

You should be able to run the app on the simulator or device of your choice. Do that now to see if TypeScript is working. For me, it works at this point and for you, it should, too.

(Optional) 4 b). Add ESLint

I also like to add ESLint to all my projects. For completeness sake, let’s do that too!
To add linting, create a file called .eslintrc with the following code:

With these settings, ESLint will recognize Jest’s keywords and mark where you have used console.log(), so you can delete them before shipping to production.

We also need to install the linting packages:

npm install --save-dev eslint babel-eslint eslint-plugin-react

Now linting should work, too (additional setup might be required depending on your editor).

Note: This article is outdated. For the 2019 update read „Using TypeScript With React Native“.

Summary

1. We have created a brand new React Native project with TypeScript.
2. We installed the necessary packages for Jest and Enzyme and also added their types for TypeScript.
3. We configured Jest to work with Enzyme and TypeScript.
4. We optionally wrote a simple unit test to check if everything works and added linting.

My name is Jan Hesters. I’m a Full Stack Developer specializing in JavaScript and Python, studied physicist, psychology-enthusiast, and alongside Nikolas, a founder of Full Stack Founders.

If you enjoyed this article, you might want to clap a bunch of times, because it helps me out a lot.
Thank you 🤗

NOTE: If you want more articles like this, you might want to subscribe to my newsletter because you will get more content like this! 💌