Jest’s packages make up an entire ecosystem of packages useful for building any kind of JavaScript tooling. “The whole is greater than the sum of its parts” doesn’t apply to Jest! In this article we are going to leverage some of Jest’s packages to learn how a JavaScript bundler works. In the end, you’ll have a toy bundler, and you’ll understand the fundamental concepts behind bundling JavaScript code.

This post is part of a series about JavaScript infrastructure. Here is where we are at:

1. Dependency Managers Don’t Manage Your Dependencies
2. Rethinking JavaScript Infrastructure
3. Building a JavaScript Testing Framework
4. Building a JavaScript Bundler (you are here)
5. Defaults Matter: The Jest Story

In the 2000s, when I was a teenager building web apps and browser games, I built most things from scratch with PHP and JavaScript. One reason was that I didn’t want to use any framework or library I didn’t understand, and the other reason was that things I didn’t understand felt like magic. I have since resigned to the fact that I cannot possibly understand every system.

However, I spent time understanding two systems deeply: JavaScript test frameworks and bundlers. Next to compilers and type-checkers, they are among the fundamental tools that make Front End Developers effective, yet people rarely have time to learn how these tools work. This post is an approachable guide to understand test frameworks. In the end, you’ll have a toy test framework, and you’ll understand the fundamental concepts behind a test runner.

You can consume this post as a live coding video attached to this post, and you can listen to the companion podcast with more background information about building a testing framework. The post, video and podcast contain different and unique content, and you can pick the one that suits you the best, or you can consume all of them for the full experience.

This post is part of a series about understanding JavaScript infrastructure. Here is where we are at:

1. Dependency Managers Don’t Manage Your Dependencies

The previous post claimed that dependency managers don’t manage dependencies. This post builds on the previous one, and I promise it’s going to be controversial. I provide recommendations that I personally implemented and have seen work in a large monorepo with hundreds of thousands of files at Facebook. The ideas are high impact but also high effort. Let me take you on a journey of what reimagining JavaScript infrastructure could look like.

To re-cap, here is where we are in our series about JavaScript infrastructure:

1. Dependency Managers Don’t Manage Your Dependencies
2. Rethinking JavaScript Infrastructure (you are here)
3. Building a JavaScript Testing Framework
4. Building a JavaScript Bundler
5. Defaults Matter: The Jest Story