简单记录vue下单元测试及Mock数据

2021-03-14 19:03:15 阅读：195 来源： 互联网

标签：vue const Counter 单元测试 mock 测试 Mock expect

1. vue-cli 创建一个demo

创建一个 demo

vue create demo

在VUE-CLI 是有提供测试插件的，所以在构建项目时选择一个测试框架。

运行测试脚本

在package.json 中可以看到运行测试脚本命令

npm run test:unit

执行后可以看到对 HelloWord组件测试通过

2. 单测流程

一般我们写的单元测试是针对组件或是方法。

方法

在src 下创建一个 utils文件并创建addition.js

// addition.js
export const addition = (a, b) => {
    return a + b;
}

在test/unit下创建一个测试文件：test-add.spec.js

// 由于Mocha测试框架没有断言库，所以需要引入 chai 来做断言
import { expect } from "chai";
// 引入需要测试方法
import {addition} from "@/utils/addition";

it("加法函数测试", () => {
  expect(addition(1, 2)).to.be.equal(3);
});

it 代表一条测试样例

'expect(addition(1, 2)).to.be.equal(3);' 这条语句可以理解为期望 addition(1, 2) 执行结果等于 3.

执行下测试命令，可以看到测试通过

组件

在components下创建测试用的Counter组件

组件功能是点击按钮，之后调用 increment 方法，使得count+1，且count计数在偶数会显示、奇数会隐藏

<template>
    <div>
        <span v-show="showCount" id="count">{{count}}</span>
        <button @click="increment"></button>
    </div>
</template>

<script>
export default {
    name: 'Counter',
    data() {
        return {
            count: 1,
        };
    },
    computed: {
        showCount() {
            return this.count%2 === 0;
        }
    },
    methods: {
        increment() {
            this.count++;
        }
    },
}
</script>

在tests/unit 下创建对Counter组件的测试文件

import { expect } from "chai";
import Vue from "vue";
import { mount } from "@vue/test-utils";
import Counter from "@/components/Counter.vue";

describe("测试计数器", () => {
  it("count内容", () => {
    const Constructor = Vue.extend(Counter);
    const vm = new Constructor().$mount();
    expect(vm.$el.querySelector("span").innerHTML).to.be.equal("1");
  });
  it("点击按钮", async () => {
    const wrapper = mount(Counter);
    await wrapper.find("button").trigger("click");
    expect(wrapper.find("#count").text()).to.be.equal("2");
  });
});

describe("测试span是否存在", () => {
  const wrapper = mount(Counter); 
  it("点击按钮span显示", async () => {
    expect(wrapper.find("span").isVisible()).to.be.equal(false);
    await wrapper.find("button").trigger("click");
    expect(wrapper.find("span").isVisible()).to.be.equal(true);
  });
});

describe (...); 代表一个测试集

通常获取一个vue实例通过 Vue.expend(xxx) 创建一个构造器construct，再new一个实例并调用 mount('xxx') 将其挂在到某一节点上。上例可以理解未创建一个Counter实例并挂在到内存中。

vue 为了方便测试提供了一些测试工具，比如上例所示的 mount 就方便我们创建一个实例，trigger 方便我们触发一个dom节点上的事件（这里模拟触发点击事件）等

更多的工具可以参考官方文档：https://vue-test-utils.vuejs.org/zh/api/wrapper/#%E5%B1%9E%E6%80%A7

运行测试文件

这里可以看到会将 tests/unit 下的所有测试文件都执行(可以看到之前的加法函数也进行了测试)。

如果我们只想测试某一文件，可以通过如下命令实现：npm run test:unit -r 测试文件路径

3. Mock数据流程

我理解的mock作用是为了前端开发时可以根据开发前与后端确定的接口文档，在本地服务器生产一些数据，本来需要从服务器获取的数据由本地Mock给出。这样前端在开发时不会因为后端接口未上线而阻塞，且后端完成开发后只需要更改请求路径就可以打通整体流程，有利于提升开发效率。

安装所需npm包

npm install axios --save
npm install mockjs --save-dev
npm install json5 --save-dev

axios: 用于发送http请求

mockjs：用于模拟一些mock数据

json5: 是对json的拓展，编写方式类似于js的对象，允许添加注释便于编写

axios发送get请求

import axios from 'axios';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    axios.get('/user/infos')
      .then(data => console.log(data))
      .catch(err => console.error(err))
  }
}

上例是在初始化项目的HelloWorld.vue 组件中添加get请求

创建mock数据

在根目录下创建mock/index.js

const fs = require("fs");
const path = require("path");
const Mock = require("mockjs");
const JSON5 = require("json5");

function getJsonFile(filePath) {
  var json = fs.readFileSync(path.resolve(__dirname, filePath), "utf8");
  return JSON5.parse(json);
}

module.exports = function(app) {
  app.get("/user/infos", function(req, res) {
    var json = getJsonFile("./send.json5");
    res.json(Mock.mock(json));
  });
};

send.json5

{
    id: '@id()',
    username: '@cname()',
}

拦截http请求，通过通过本地服务器发送mock数据

这里拦截是通过webpack中devServe.before这个中间件，先于服务器去处理发送的网络请求

在根目录下创建 vue.config.js

module.exports = {
    devServer: {
      before: require('./mock/index.js')
    },
  };

启动运行demo，可以看到获取到了mock的数据

标签：vue,const,Counter,单元测试,mock,测试,Mock,expect
来源： https://blog.csdn.net/timecur/article/details/114790056

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

简单记录vue下单元测试及Mock数据

1. vue-cli 创建一个demo

2. 单测流程

3. Mock数据流程