Test Single-page Application Components

Understand the specifics of a single-page application component and its testing, such as lifecycle hooks and event handlers.

We’ll be looking at class-based single-page application (SPA) components. Angular, React, and Vue all support class-based components.

SPA components generally expose lifecycle hooks (or methods) that can be used to do specific actions at certain times. For example, wait until the component is initialized (or mounted/displayed) before making a call to the API to fetch some data. And at the time of its destruction (or unmount), stop any further processing.

Click the following links for examples of component lifecycle hooks from the aforementioned SPA frameworks: :

‘ArticleComponent’

For this lesson, we’ll use an SPA component that displays an article, like in a blog. It loads the article at the time of its initialization. At the time of its destruction, it marks itself destroyed and doesn’t show the article.

In the code playground below, there’s an implementation of ArticleComponent and its tests. Let’s run them and see their breakdown below.

Get hands-on with 1200+ tech skills courses.