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

2022-12-10 13:40:55 浏览数 (1)

Vue-Test-Utils 简介

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

安装

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

代码语言：javascript复制
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 文件

基础语法

开始测试

执行命令

代码语言：javascript复制
npm run test:unit -- --watchAll

控制台实时显示测试结果

语法内容

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

测试所需组件

父组件

代码语言：javascript复制
<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>

子组件

代码语言：javascript复制
<template>
  <h1>{{ msg }}</h1>
</template>

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

mount 和 shallowMount

使用 mount

代码语言：javascript复制
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

代码语言：javascript复制
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

代码语言：javascript复制
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 会报错，并导致单元测试失败。

代码语言：javascript复制
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 不会报错，并不会导致单元测试失败。

代码语言：javascript复制
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

代码语言：javascript复制
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 不会报错。

代码语言：javascript复制
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 会报错。

代码语言：javascript复制
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

代码语言：javascript复制
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 数组，如果没有，返回空数组。

代码语言：javascript复制
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 的数组，如果没有，返回空数组。

vue.js 渲染 单元测试 腾讯云测试服务 编程算法

0 人点赞