51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 2876|回复: 1
打印 上一主题 下一主题

[转贴] 使用Jest实现Vue自动化测试

[复制链接]
  • TA的每日心情
    无聊
    3 天前
  • 签到天数: 1050 天

    连续签到: 1 天

    [LV.10]测试总司令

    跳转到指定楼层
    1#
    发表于 2020-8-17 15:26:50 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
           前言
      在开始前,我们先来聊一下什么是自动化测试。通常,在需求确定以后,测试会编写测试用例,然后,根据测试用例中描述的规程一步步执行测试,得到实际结果与期望结果的比较。在此过程中,为了节省人力、时间或硬件资源,提高测试效率,便引入了自动化测试的概念。
      那么知道了什么是自动化测试以后,我们来看看前端如何实现自动化测试。通常有两种方案可以实现前端自动化测试
      unit-test(单元测试):对应测试中的白盒测试。在测试框架中执行代码,并且给出预期输出,然后对实际输出和预期输出进行比较。以此来判断是否通过测试。
      e2e-test(端到端测试):对应测试中的黑盒测试。项目启动以后,测试框架会模拟用户的行为,例如点击,输入等操作。然后观察页面中的元素展现形式是否和预期一致。以此来判断是否通过测试。
      今天,我要介绍的就是在 vue 项目,如何使用 jest 实现单元测试
      集成 Jest
      使用vue-cli新建的项目可以直接选择jest作为测试框架,如果是已创建的vue-cli项目,可以使用以下命令集成jest
    1. vue add unit-jest
    复制代码
    Jest 配置文件
      集成 Jest 后,会在根目录下生成一个jest.config.js文件。并配置了@vue/cli-plugin-unit-jest,这个预设。预设配置为如下内容。
    1. module.exports = {
    2.   moduleFileExtensions: [
    3.   "js",
    4.   "jsx",
    5.   "json",
    6.   // tell Jest to handle *.vue files
    7.   "vue"
    8.   ],
    9.   transform: {
    10.   // process *.vue files with vue-jest
    11.   "^.+\\.vue$": require.resolve("vue-jest"),
    12.   ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": require.resolve(
    13.   "jest-transform-stub"
    14.   ),
    15.   "^.+\\.jsx?$": require.resolve("babel-jest")
    16.   },
    17.   transformIgnorePatterns: ["/node_modules/"],
    18.   // support the same @ -> src alias mapping in source code
    19.   moduleNameMapper: {
    20.   "^@/(.*)$": "<rootDir>/src/$1"
    21.   },
    22.   testEnvironment: "jest-environment-jsdom-fifteen",
    23.   // serializer for snapshots
    24.   snapshotSerializers: ["jest-serializer-vue"],
    25.   testMatch: ["**/tests/unit/**/*.spec.[jt]s?(x)", "**/__tests__/*.[jt]s?(x)"],
    26.   // https://github.com/facebook/jest/issues/6766
    27.   testURL: "http://localhost/",
    28.   watchPlugins: [
    29.   require.resolve("jest-watch-typeahead/filename"),
    30.   require.resolve("jest-watch-typeahead/testname")
    31.   ]
    32.   };
    复制代码
    但是这个预设可能不能满足你的需求,我们需要对他进行一些拓展。由于我们项目中使用了.js后缀的文件。并且使用了@以外的alias别名,所以需要将这两个配置加到jest.config.js中
    1. module.exports = {
    2.   preset: "@vue/cli-plugin-unit-jest",
    3.   transform: {
    4.   "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    5.   },
    6.   moduleNameMapper: {
    7.   "^@api/(.*)$": "<rootDir>/src/server/api/$1",
    8.   "^@views/(.*)$": "<rootDir>/src/views/$1",
    9.   "^@com/(.*)$": "<rootDir>/src/components/$1",
    10.   "^@store/(.*)$": "<rootDir>/src/store/$1"
    11.   }
    12.   };
    复制代码
         调试
      基于vscode进行调试,在package.json中配置
    1. "test:debugger": "node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit --runInBand --watch"
    复制代码
    然后在.vscode\launch.json文件中配置
    1. {
    2.   "version": "0.2.0",
    3.   "configurations": [
    4.   {
    5.   "type": "node",
    6.   "request": "attach",
    7.   "name": "Attach to ws",
    8.   "address": "localhost",
    9.   "port": 9229,
    10.   "skipFiles": ["<node_internals>/**"]
    11.   }
    12.   ]
    13.   }
    复制代码
          执行以上命令以后即可实现断点调试,并监听文件的变动自动刷新。
      使用
      简单的来说,今天我们主要介绍 Jest 的三个功能,快照(snapshots)、模拟事件(trigger)、断言(expect-to)。
      下面来介绍一下这些功能的用法
      快照
      快照的作用是将,当前的组件的完整的dom结构保存下来。下次再执行时,会比较组件更新后的dom结构,如果结构发生变化,则测试用例就无法通过。
      这里有一个注意点,我执行了await wrapper.vm.$nextTick();,才进行了快照保存,因为mount方法执行后,组件的渲染是一个异步的过程。所以需要执行await wrapper.vm.$nextTick();后,才可以获取到执行完渲染的组件的dom结构。
    1. import { mount } from "@vue/test-utils";
    2.   import TestSnapshots from "@/components/TestSnapshots.vue";
    3.   describe("TestSnapshots.vue", () => {
    4.   it("render TestSnapshots", async () => {
    5.   const wrapper = mount(TestSnapshots);
    6.   await wrapper.vm.$nextTick();
    7.   expect(wrapper.html()).toMatchSnapshot();
    8.   });
    9.   });
    复制代码
          模式事件
       通过find方法找到dom节点以后,就可以使用trigger方法触发这个dom节点上绑定的事件。这里要注意的是,trigger是异步的
    1. import { mount } from "@vue/test-utils";
    2.   import TestTrigger from "@/components/TestTrigger.vue";
    3.   describe("TestTrigger.vue", async () => {
    4.   it("render TestTrigger", async () => {
    5.   const wrapper = mount(TestTrigger);
    6.   const btn = wrapper.find("button");
    7.   await closeBtn.trigger("click");
    8.   });
    9.   });
    复制代码
          断言
       获取你要判断的对象,然后执行判断语句,测试结果是否符合预期。下面是一个最简单的断言判断。判断实例化后的 vue 实例中testData的值是否符合预期
    1. import { mount } from "@vue/test-utils";
    2.   import TestExpect from "@/components/TestExpect.vue";
    3.   describe("TestExpect.vue", () => {
    4.   it("render TestExpect", () => {
    5.   const wrapper = mount(TestExpect);
    6.   expect(wrapper.vm.testData).toBe(false);
    7.   });
    8.   });
    9.   ![](https://user-gold-cdn.xitu.io/2020/7/28/17394086692db12f?w=873&h=315&f=png&s=195213)
    复制代码
         还有很多其他的断言,可以查看 Jest 的官方文档
      总结
      编写单元测试,可以使我们的代码更加健壮。同时加强我们对更多业务场景的思考。以上jest的使用介绍只是一些最基本的用法,还有很多比如mock数据,网络接口的测试等等。随着前端承载的任务越来越重,相信单元测试以后也会成为前端仔的必备技能。

    作者:嘻哈工程师   来源:掘金

    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏
    回复

    使用道具 举报

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

    GMT+8, 2024-11-24 09:55 , Processed in 0.078543 second(s), 22 queries .

    Powered by Discuz! X3.2

    © 2001-2024 Comsenz Inc.

    快速回复 返回顶部 返回列表