添加消息组件

到目前为止，我们已经学习了如何使用浅层渲染来单独测试一个组件，从而阻止其子组件树的渲染。

但在某些情况下，我们希望测试作为一个整体行为的组件，例如表单标签。需要注意的是，这种情况仅适用于表现型组件，因为它们不关心应用的状态和逻辑。在大多数情况下，你应该对容器型组件使用浅层渲染。

测试两个组件作为一个单元

以 Message 和 MessageList 组件为例，除了为它们各自编写单元测试外，我们还可能希望将它们一起作为整体进行测试。

第一步：

首先，创建 components/Message.vue：

第二步：

接下来更新 components/MessageList.vue 以使用该组件：

components/MessageList.vue

1<template>
2  <ul>
3    <Message :message="message" v-for="message in messages"/>
4  </ul>
5</template>
6
7<script>
8import Message from "./Message";
9
10export default {
11  props: ["messages"],
12  components: {
13    Message
14  }
15};
16</script>

---

完成两个组件作为一个单元的测试后，我们进入测试的下一阶段。