Test with Jest

Welcome to “The Complete Jest Guide.” If you’ve found this course, you are likely a JavaScript engineer looking to up your testing game. Kudos to you! This is a great choice because tests are an incredibly powerful resource in building stable, scalable applications. However, tests are only as powerful as we write them to be.

The importance of accurate testing

Quality tests allow us to iterate quickly with confidence. In setting up requirements to ensure that our code does certain things, we are able to change how we do those things while ensuring that we don’t accidentally break something else in the process. For instance, we might want to ensure that a form does in fact submit when a user clicks <button>submit</button>. If we change the inputs, styling, or element nesting, we still want it to submit. In writing a test for the button’s functionality, we can safely make these changes and know that the form will still work as intended.

The flip side of this is that poorly written tests provide a false sense of security. A poorly written test in the scenario above might cause us to incorrectly think we haven’t broken the form and ship broken code.

Jest is a package created and maintained by Meta, previously known as Facebook. Jest has been around since 2014—a solid run for a third-party package. This means that it is a well-supported package.

Jest is what we call a test runner. A test runner is a program that actually runs our tests. In the same way that you can write beautiful code but need specific tools to bring it to life, Jest allows us to actually execute the tests we have designed. It is versatile and can be used across environments and JavaScript libraries. From React and Angular clients to Node servers, as long as we are talking about JavaScript, Jest can execute seamlessly and spit out that beautiful, happy green or sad, sad red.

At this point, you may be realizing that Jest must leave a few gaps for us to fill. Testing Vue in the browser has different requirements than testing Express on the server.

The environment

Jest is a fantastic tool for running our tests, but the versatile nature of JavaScript means that we need additional support to access the pieces of our code or the use cases of this code that we actually want to test against. Testing a server will look very different than testing a browser client.

This support is found in framework-specific testing libraries, like React’s React Testing Library, Node’s Supertest, and Angular’s Angular Testing Library. This makes it difficult to really discuss Jest without also discussing a specific JavaScript framework.

Note: It’s important to remember that Jest is entirely agnostic to these frameworks in how it functions.

Course content

In this course, we will be learning about Jest’s framework-agnostic context. The goal here is to gain a solid enough understanding that you can swap in Express, Next, Nest, and Vue, and still be able to leverage Jest to its fullest capabilities.

In all cases, Jest provides the environment in which we document and write our tests. We can do all our setup, mocking, data stubbing, documentation, organization, and assertions with Jest. Then, we can just use our preferred library to implement the framework-specific logic that we want to test. We can query the DOM to make assertions about what the user can see or test the data inside of an HTTP response.

This may sound somewhat abstract at this point. However, we will thoroughly discuss this environment and the tools it provides us, as well as see examples with the supporting libraries for context. For now, think of Jest as an engine that can make anything run, from a car to a plane to a boat, as long as the vehicle meets the right specs.