vue test utils学习

一、 shallowMount和mount的区别

shallowMount 和 mount 是 Vue.js 测试工具 vue-test-utils 中用于挂载组件的两个方法。它们的区别如下：

1. shallowMount 方法会创建一个虚拟的 DOM 树，只挂载组件的根元素及其子元素，而不会挂载整个组件树。这意味着，对于嵌套组件，shallowMount 只会挂载最外层的组件，而不会挂载嵌套组件内部的内容。

2. mount 方法则会创建一个完整的 DOM 树，挂载整个组件树，包括嵌套组件。

3. shallowMount 方法的挂载速度通常比 mount 方法快，因为它只挂载了组件的一部分。

4. 在使用 shallowMount 方法时，如果需要测试嵌套组件的行为，需要手动访问嵌套组件的属性和方法。而使用 mount 方法时，可以直接通过组件的属性和方法来访问嵌套组件。

综上所述，如果只需要测试组件的根元素及其子元素的行为，可以使用 shallowMount 方法；如果需要测试整个组件树的行为，或者需要访问嵌套组件的属性和方法，应该使用 mount 方法。

二、在使用shallowMount方法时，如何手动访问嵌套组件的属性和方法？

当使用 shallowMount 方法挂载组件时，由于只挂载了组件的根元素及其子元素，嵌套组件并没有被实际挂载。因此，如果要访问嵌套组件的属性和方法，需要通过组件的属性或事件来进行间接访问。

下面是一些常见的方式来手动访问嵌套组件的属性和方法：

1. 通过事件派发：如果嵌套组件暴露了自定义事件，可以在根组件中监听这些事件，并在事件处理函数中访问嵌套组件的属性和方法。

2. 通过属性传递：如果嵌套组件需要与根组件进行数据通信，可以通过属性传递的方式来访问嵌套组件的属性和方法。

下面是一个示例代码，展示了如何通过事件派发来访问嵌套组件的属性和方法：

const MyComponent = {
  template: `<div>
    <child-component @myEvent="handleEvent"></child-component>
  </div>`,

  methods: {
    handleEvent(event) {
      // 在这里可以访问嵌套组件的属性和方法
      const childComponent = event.target;
      const childMethod = childComponent.childMethod;
      childMethod();
    }
  }
};

const ChildComponent = {
  template: `<button @click="childMethod">Click Me</button>`,

  methods: {
    childMethod() {
      console.log("Child method called");
    }
  }
};

// 使用 shallowMount 挂载根组件
const wrapper = shallowMount(MyComponent);

// 模拟点击嵌套组件的按钮
wrapper.find("button").trigger("click");

在上面的示例中，根组件 MyComponent 中使用了 <child-component> 元素来嵌套 ChildComponent 组件。通过在根组件中定义一个自定义事件 myEvent，并在嵌套组件中使用 @myEvent 进行监听，当触发事件时，根组件的事件处理函数 handleEvent 会被调用。在该函数中，可以通过事件目标 event.target 获取到嵌套组件的实例，然后访问嵌套组件的属性和方法。

请注意，在使用 shallowMount 方法时，嵌套组件的行为可能与实际应用中的行为有所不同，因为它只模拟了组件的一部分。如果需要更全面的测试，建议使用 mount 方法来挂载整个组件树。