【架构师（第二十八篇）】 测试工具 Vue-Test-Utils 基础语法

Vue-Test-Utils 简介

提供特定的方法，在隔离的环境下，进行组件的挂载，以及一系列的测试

安装

这是一个基于 vue-cli 生成的项目，可以直接使用 vue add xxx 进行插件的安装。

vue add unit-jest

插件运作的过程

• 安装的依赖
  • vue-test-utils
  • vue-jest
  • 注入了新的命令
• vue-cli-service test:unit
  • tests/unit 目录下以 .spec.(js|jsx|ts|tsx) 结尾的文件
  • __test__ 目录下的文件
• vue-jest 转换

  • 将 vue SFC 格式的文件转化为对应的 Ts 文件

  • 将 Ts 文件通过 presets/typescript-babel 转换成对应的 Js 文件

基础语法

开始测试

执行命令

npm run test:unit -- --watchAll

控制台实时显示测试结果

语法内容

• 渲染组件
  • mount 和 shallowMount
  • 传递属性
• 元素是否成功的显示
  • 查找元素的不同写法
  • get，find
  • findComponent，getComponent
  • findAll，findAllComponents

测试所需组件

父组件

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button class="add-count"
            @click="addCount">{{ count }}</button>
    <hello-com msg="1234"></hello-com>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue'
import HelloCom from './hello.vue'

defineProps({
  msg: String
})

const count = ref(0)
const addCount = () => {
  count.value++
}
</script>

子组件

<template>
  <h1>{{ msg }}</h1>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
const props = defineProps({
  msg: String
})
</script>

mount 和 shallowMount

使用 mount

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = mount(HelloWorld, {
      props: { msg },
    });
    // 打印 html 结构
    console.log(wrapper.html());
  });
});

使用 shallowMount

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      props: { msg },
    });
    // 打印 html 结构
    console.log(wrapper.html());
  });
});

可以看到 mount 和 shallowMount 的区别就是 mount 会打印出完整的 html 结构，而 shallowMount 将子组件以标签的形式打印。

得到的结论是

• mount 一股脑全部渲染
• shallowMount 只渲染组件本身，子组件不渲染
• shallowMount 将其他组件隔离，更适合单元测试

find 和 get

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      props: { msg },
    });
    // 使用 get
    console.log(wrapper.get('h1').text());
    // 使用 find
    console.log(wrapper.find('h1').text());
  });
});

当元素存在的时候，find 和 get 是一样的。

当元素不存在的时候，get 会报错，并导致单元测试失败。

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      props: { msg },
    });
    // 使用 get
    console.log(wrapper.get('h2'));
  });
});

当元素不存在的时候，find 不会报错，并不会导致单元测试失败。

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      props: { msg },
    });
    // 使用 find
    console.log(wrapper.find('h2'));
  });
});

得到的结论是

• 找不到元素的时候，find 会返回 null 不会报错，case 通过，get 会报错，case 失败。

• 总是使用 get ，除非想要判断一些元素不存在的时候，使用 find 。

findComponent 和 getComponent

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      props: { msg },
    });
    // 使用 findComponent
    console.log(wrapper.findComponent(HelloCom));
    // 使用 getComponent
    console.log(wrapper.getComponent(HelloCom));
  });
});

当组件存在时，findComponent 和 getComponent 的结果是一样的。

当组件不存在时，findComponent 不会报错。

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      props: { msg },
    });
    console.log(wrapper.findComponent({ name: 'foo' }));
  });
});

当组件不存在时，getComponent 会报错。

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      props: { msg },
    });
    console.log(wrapper.getComponent({ name: 'foo' }));
  });
});

得到的结论是

• 找不到组件的时候，findComponent 会返回 null 不会报错，case 通过，getComponent 会报错，case 失败。
• 总是使用 getComponent ，除非想要判断一些元素不存在的时候，使用 findComponent 。
• 只需要判断是否渲染了子组件，传递了正确的属性，不必测试子组件中的内容，这就是单元测试的意义，独立，互不影响。

findAll 和 findAllComponents

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      props: { msg },
    });
    console.log(wrapper.findAll('h1'));
  });
});

findAll 返回元素的 DOMWrapper 数组，如果没有，返回空数组。

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      props: { msg },
    });
    console.log(wrapper.findAllComponents(HelloCom));
  });
});

findAllComponents 返回组件 vueWrapper 的数组，如果没有，返回空数组。