Testing React Typescript with Jest and Enzyme

With Create React App

Without Create React App

If you set up a project simply using React, typescript, jest and webpack, you may encounter into a series of problems when running tests.

Problem 1

These errors occur when importing React and other modules in the XX.test.tsx file. When running “npm run dev”, we use webpack or other tools to handle all the babel transform work with the help of ts-loader. However, when we run “npm run test”, jest does not recognize all the syntaxes beyond basic javascript. Thus, we need to config babel presets for jest or simply using ts-jest.

With Ts-jest

We just need to add a single config in the jest.config.js file.

With Babel

we need to config related babel presets as follows:

Problem 2

Jest cannot parse files that are not javascript, thus we need to mock the non-JS modules with the “moduleNameMapper” config option.

Then add the config option.

Using Enzyme

As of Enzyme 3, you will need to install Enzyme along with an Adapter corresponding to the version of React you are using. (The examples above use the adapter for React 16.)

After all these configs, you should be able to test a react typecript project with jest and enzyme.

Related posts:

I am pretty sure researchers have joined their heads together and are doing all that they can to answer this question. When all I have known is them dissolving into nothingness right in front of my…

Every six months or so, our design team settles into the Austin Central Library for a themed campfire to get us thinking about where we’ve been and where we’re going. They are often great for…

Businesses nowadays are looking into an exponential growth, and in most cases when a digital business strategy implemented properly they will experience a massive flow of customer requests through…