Configuring Jest and Enzyme in Create React App on Typescript

Configuring Jest and Enzyme in Create React App on Typescript

I was recently trying to get a Jest/Enzyme testing environment working with React (Create React App with Typescript) and all of the documentation I read couldn't help me fix this one error

I was recently trying to get a Jest/Enzyme testing environment working with React (Create React App with Typescript) and all of the documentation I read couldn't help me fix this one error:

I finally figured out how to do it after reading a lot and trying out a handful of solutions. I'll be starting with a vanilla installation of CRA (with the Typescript flag set) as my starting point to illustrate how to get this working.

Create React App Gotcha

Because I'm using Create React App, there are certain benefits that I get out of the box, and one of those benefits is Jest. According to the documentation, Create React App comes with:

A fast interactive unit test runner with built-in support for coverage reporting.

As part of this built-in test bundle, Create React App sets up some default paths for you, including ./src/setupTests.js as a path to test configuration. Because this path is setup for you, you'll run into conflicts if you try to rename the file or override the path elsewhere.

1. Setup Jest with Typescript

Now that we're aware of that gotcha, let's setup Jest with Typescript. These instructions come from a starting resource that I found on Github by Basarat. I'm including them for convenience.

First, install Jest types & TS-Jest:

yarn add @types/jest ts-jest -D

Next add a jest.config.js to your project root (outside of src) and add the following within that file:

module.exports = {
  "roots": [
    "<rootDir>/src"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
}

Basarat does a good job of explaining this code, but the main point to understand is that we're telling Jest to use ts-jestwhen it encounters typescript files.

2. Install Enzyme

Now that we have Jest configured, we need to install Enzyme-related dependencies:

yarn add enzyme @types/enzyme enzyme-to-json enzyme-adapter-react-16 -D

Additionally, we need to tell Jest to use our Enzyme serializer. Add the following line to the end of jest.config.js:

"snapshotSerializers": ["enzyme-to-json/serializer"],

Other tutorials tell you to add "setupTestFrameworkScriptFile": "<rootDir>/src/setupEnzyme.ts" to your Jest config file. However, if you're on CRA, that gotcha we discussed earlier will ignore this line and will prevent Enzyme from working properly.

3. Configure Enzyme

Enzyme needs to be configured and instantiated for it to work properly. If it doesn't already exist, create the file setupTests.js in your src directory and add the following to it:

import { configure } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

4. Test!

Now that we've got Jest and Enzyme installed and configured, let's test! I've written a basic Link component that wraps <a>:

/===================
  Link.tsx
 ===================/

import React from 'react';

interface LinkProps { className?: string; href: string; }

const Link: React.FC<LinkProps> = ({ className, href, children }) => { return ( <a href={href} className={className} > {children} </a> ); }

export default Link;

I've also written a basic test for that link component:

/===================
  Link.unit.test.tsx
 ===================/

import React from "react"; import { shallow } from 'enzyme'; import Link from './Link';

describe('Link', () => { it('Renders link to Google', () => { const link = shallow(<Link href="http://google.com">Link to Google</Link>); expect(link).toMatchSnapshot(); });

it('Renders link to Google with classname', () => { const link = shallow(<Link href="http://google.com" className="my-link-class">Link to Google</Link>); expect(link).toMatchSnapshot(); }); });

Once you've got that component and test created, run yarn test to see the following output:

Thanks for reading and Happy testing :)

reactjs react-native typescript testing

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.