A guide through The Wild Wild West of setting up a mono repo — Part 2: Adding Jest to our mono repo

Auke ten Hoopen
Feb 11 · 4 min read

This is part two of our mono repo setup. In the first part, we created a mono repo with Lerna and TypeScript. In this part, we will focus on adding Jest to our setup.

You can find the full example and more in the template repo:

https://github.com/ahoopen/typescript-mono-repo

Installation

Let's install our dependencies. Use one of the following commands.

NPM

Yarn

After this is done installing, let's create our Jest config file. By default, Jest can run without any config files, but it will not compile files. To make it transpile TypeScript with ts-jest , we will need to create a configuration file that will tell Jest to use a ts-jest preset. ts-jest can create the configuration file for you automatically.

NPM

Yarn

This command will create a jest.config.js file in our root. This config will inform Jest about how to handle files correctly.

Testing packages

Before we can run our tests we first need to create them. Let’s create a simple function for adding numbers. Our add function, beautiful right? :)

packages/web/src/add.ts

And the unit test for it:

packages/web/src/add.spec.ts

Now that we have our add function and unit test in place, we can start adding our test command — yarn jest — to our package. Let's add it to our webpackage.

Now run yarn test in the root of our repository. It will run tests in all of our packages. So far nothing crazy, I know. Testing in a mono repo gets a lot harder when you have multiple packages and some of them depend on each other.

Dependency on own mono repo package

What if we want to enhance ouradd method with a util method from our @ahoopen/utilspackage. This is a bit of a contrived example. It doesnt make any sense but its only to illustrate the problem :)

Next step is to add the package to our dependencies.

Now we only have to run yarn test and we are done, right? Let's see…

Tests fail…but why? The reason why this fails is, that in our TypeScript tsconfig we have mapped our package @ahoopen/utils to @ahoopen/utils/src

Our tsconfig

Why don’t we remove that mapping? Then the tests also work immediately.

Well, this mapping helps us to easily navigate through all the different packages and when we make a code change, it will be picked up in all packages without needed to build them first. But the downside with this approach is that Jest can’t resolve the packages.

Luckily we have a solution to this problem.

Path mapping in Jest

In our Jest config, we have to set up the “moduleNameMapper” correctly to fix this issue.

jest.config.js

Oke, so what's happing here? We read the packages folder to get every package name. Then we automatically generate a moduleNameMapper. Which boils down to the same mapping as with the tsconfig . We map the import path to the package src directory.

This will be the generated output:

If we run yarn test again, our tests pass :)

Conclusion

We have added Jest to our mono repo. We can now run Jest in all of our TypeScript packages. To get it all working nicely together we needed to add a moduleNameMapper to our jest config. By automatically reading our package folder. We don’t have to keep adjusting our jest config when we create a new package.

The next part we will set up Github actions for releasing our packages. Stay tuned!

AH Technology

Sharing our knowledge when building the world greatest Food & Tech company. #ahtechnology

AH Technology

Albert Heijn, part of Ahold Delhaize, is the number one food retailer in the Netherlands. We’ve been inspiring customers and building trust for more than 130 years. We making better food accessible to everyone — and making shopping fit the way people live today. #ahtechnology

Auke ten Hoopen

Written by

Lead Frontend developer @ Albert Heijn

AH Technology

Albert Heijn, part of Ahold Delhaize, is the number one food retailer in the Netherlands. We’ve been inspiring customers and building trust for more than 130 years. We making better food accessible to everyone — and making shopping fit the way people live today. #ahtechnology

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store