Adding a Message Component

So far, we’ve learned how to use Shallow Rendering to test a component in isolation, preventing the component sub-tree from rendering.

But in some cases, we want to test components that behave as a group, such as a form label. Keep in mind that this only applies to Presentational Components since they’re unaware of app state and logic. In most cases, you’d want to use Shallow Rendering for Container components.

Testing Two Components as a Unit

In the case of the Message and MessageList components, apart from writing their own unit tests, we could want to test them both as a unit as well.

Step 1:

Let’s start by creating components/Message.vue: