​

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​​ 的数组，如果没有，返回空数组。