Mocking child components and directives using the ng-mocks package

Unit tests mostly revolve around testing components in isolation. However, what if your component depends completely on another component or directive to work properly? In such cases, you usually provide a mock implementation for the component, but that is a lot of work. However, with the ng-mocks package, it is super easy. In this recipe, we'll learn an advanced example of how to use ng-mocks for a parent component that depends on a child component to work properly.

Getting ready

The project that we are going to work with resides in chapter10/start_here/mocking-components-with-ng-mocks, which is inside the cloned repository. Perform the following steps:

1. Open the project in Visual Studio Code.
2. Open the Terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

This should open the app in a new browser tab. You should see something similar...