前端自动化测试Vue中TDD和单元测试示例详解

目录 1、简单用例入门 2、快照测试 3、覆盖率测试 4、结合 Vuex 进行测试

1、 简单 用例入门

Vue 提供了 @vue/ test -utils 来帮助我们进行单元测试，创建 Vue 项目的时候勾选测试选项会自动帮我们安装

先来介绍两个常用的挂载方法：

mount ：会将组件以及组件包含的子组件都进行挂载 shallowMount ：浅挂载，只会挂载组件，忽略子组件

再来看一个简单的测试用例：

import { shallowMount }  From  "@vue/test-utils";
import HelloWorld f rom  "@/ component s/HelloWorld.vue";
describe("HelloWorld.vue", () => {
   IT ("renders  PR ops.msg when passed", () => {
    const msg = "new message";
    const wrap PE r = shallowMount(HelloWorld, {
      pro psd ata: { msg }
    });
    e xp ect(wrapper.props("msg")).toBe(msg);
  });
});

shallowMount 会返回一个 wrapper ，这个 wrapper 上面会包含很多帮助我们测试的方法，参考： v1.test-utils.vuejs.org/zh/api/wrap…

2、 快照 测试

测试用例写法如下： 第一次测试会保存 wrapper 的快照，第二次会比较当前 wrapper 和快照的区别

describe("HelloWorld.vue", () => {
  it("renders props.msg when passed", () => {
    const msg = "new message";
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    });
    expect(wrapper).toMatchSnapshot();
  });
});

3、覆盖率测试

覆盖率测试是对测试完全程度的一个评估，测试覆盖到的业务代码越多，覆盖率越高

在 jest. config .js 中我们可以设置 collectCoverageFrom，来设置需要进行覆盖率测试的文件

我们可以测试所有的 .vue 文件，忽略 node_modules 下 所有文件

要注意，在 Vue 中配置 jest，参考： v1.test-utils.vuejs.org/zh/guides/#…

然后添加一条 script 命令，就能进行测试了：

"test:unit": "vue-cli -s ervice test:unit --coverage"

执行命令会生成 coverage 文件夹，Icov-report/index.ht ML 里会可视化展示我们的测试覆盖率

4、结合 Vuex 进行测试

如果我们在组件中引入了 Vuex 状态 或者 使用了相关方法

在测试用例里，挂载组件的时候只需要传入 vuex 的 Store 即可

import store from "@/store/index";
const wrapper = mount(HelloWorld, {
  store
});

以上就是前端自动化测试Vue中TDD和单元测试示例详解的详细内容，更多关于Vue TDD单元测试的资料请关注其它相关 文章 ！

您可能感兴趣的文章: vue前端测试开发watch监听data的数据变化 springboot vue测试平台开发调通前后端环境实现登录 springboot vue测试前端项目管理列表分页功能实现 springboot vue测试平台前端项目查询新增功能 springboot vue接口测试HutoolUtil TreeUtil处理树形结构 springboot vue接口测试前后端树节点编辑删除功能 springboot vue接口测试前端动态增删表单功能实现

总结

以上是 为你收集整理的 前端自动化测试Vue中TDD和单元测试示例详解 全部内容，希望文章能够帮你解决 前端自动化测试Vue中TDD和单元测试示例详解 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于前端自动化测试Vue中TDD和单元测试示例详解的详细内容...