Jest and Enzyme Testing with TypeScript
This is an example (for reference purposes) on how to use Jest and Enzyme to test React.JS 16.x component developed in TypeScript 2.x.
Jest is a decent unit testing option which provides great TypeScript support.
Getting Started
- Clone this repo:
git clone https://github.com/cedrickchee/react-typescript-jest-enzyme-testing react-typescript
cd react-typescript
- Install project dependencies:
yarn
# If you are using NPM
npm install
- Start Jest to run tests:
# start Jest in watch mode
yarn test -- --watch
# or if you are using NPM
npm t -- --watch
- There is no step 4. You can start developing your React component and write unit test along the way.
Project
How's this project was created? From a clean project setup, here are the steps to recreate this example:
- Step 0: Pre-requisite
Install React.JS and TypeScript:
yarn add react react-dom typescript
# or if you are using NPM
npm i react react-dom typescript
- Step 1: Install Jest
Install the following using yarn/npm:
yarn add jest @types/jest ts-jest --dev
# or if you are using NPM
npm i jest @types/jest ts-jest -D
Explanation:
-
Install Jest framework (
jest
). -
Install the types for Jest (
@types/jest
). -
Install the TypeScript preprocessor for Jest (
ts-jest
) which allows jest to transpile TypeScript on the fly and have source-map support built in. -
Save all of these to your dev dependencies (testing is almost always a npm dev-dependency).
-
Step 2: Configure Jest
Add the following jest.config.js
file to the root of your project:
module.exports = {
"roots": [
"<rootDir>/src"
],
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
}
Explanation:
-
We always recommend having all TypeScript files in a
src
folder in your project. We assume this is true and specify this using theroots
option. -
The
transform
config just tells Jest to usets-jest
for ts / tsx files. -
The
testRegex
tells Jest to look for tests in any__tests__
folder AND also any files anywhere that use the(.test|.spec).(ts|tsx)
extension e.g.checkbox.test.tsx
etc. -
The
moduleFileExtensions
tells Jest to recognize our file extensions. This is needed as we add ts/tsx into the defaults (js|jsx|json|node
). -
Step 3: Run tests
Run npx jest --watch (or ./node_modules/.bin/jest --watch
) from your project root and Jest will execute any tests you have.
Optional: Add script target for npm scripts
Add this in package.json
:
{
"test": "jest --watch"
}
-
This allows you to run the tests in watch mode with a simple
yarn test
ornpm t
. -
Step 4: Setup Enzyme
Enzyme allows you to test React components with DOM support. There are three steps to setting up Enzyme:
- Install Enzyme, types for Enzyme, a better snapshot serializer for Enzyme, enzyme-adapter-react for your React version:
yarn add enzyme @types/enzyme enzyme-to-json enzyme-adapter-react-16 --dev
# or if you are using NPM
npm i enzyme @types/enzyme enzyme-to-json enzyme-adapter-react-16 -D
- Add "snapshotSerializers" and "setupTestFrameworkScriptFile" to your
jest.config.js
:
module.exports = {
// ... ... ... TRUNCATED. Other parts as before ... ... ...
// Setup Enzyme
"snapshotSerializers": ["enzyme-to-json/serializer"],
"setupTestFrameworkScriptFile": "<rootDir>/src/setupEnzyme.ts",
}
- Create
src/setupEnzyme.ts
file.
import { configure } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
configure({ adapter: new EnzymeAdapter() });
That's all to it!