Vue中使用Mock：单元测试

在Server端，可以用Mock来模拟前端的请求，从而在没有前端联调的情况下进行单元测试；同样地，在前端，可以用Mock来拦截前端请求，并返回模拟数据，从而在没有Server端联调的情况下进行单元测试。

在Vue中使用Mock

一．安装Mock库

运行命令：

npm install mockjs

二．编写Mock的拦截接口脚本

Mock需要使用js文件来定义所有需要拦截的脚本及返回数据。

在src下新建一个文件夹，命名为mock。在其下创建一个js文件，命名为mock.js。

为mock.js添加内容：

// 引入mockjs
import Mock from 'mockjs';

const url = '/test/getInfo';
Mock.mock(RegExp(url + ".*"), 'get', {
    title: 'this is a test',
    value: 20181105
});
export default Mock;

可以看到该脚本做了一个事情：为Mock对象添加了一个get请求拦截，并设置了请求的url和返回值。当Mock检测到该请求时，就会进行拦截，并返回指定的返回值。

注意传入的url使用了正则表达式：RegExp(url + ".*")。这是因为Mock是严格按字符串匹配的。若这里直接传入一个字符串：'http://localhost/test/getInfo'，当为get请求附加不同的参数，Mock就会匹配不到。

一个js文件中可以mock多个请求。也可以将请求分类，放在多个js文件中。

js文件可以放在任意位置。上面放在了src/mock文件夹下。只要后面引入的时候路径正确即可。

三．将Mock引入Vue中

在主入口的js文件中，添加：

import Mock from '@/mock/mock'

不同的工程，主入口js文件名不同。有的是index.js，有的是main.js。引入后，文件内容如下：

import App from '@/views/index/index.vue'
import router from '@/router/index-router'
import store from '@/store/index-store'

// 引入mock脚本
import Mock from '@/mock/mock'

new Vue({ el: '#root', store, router, render: h => h(App) })

这里将前面定义的mock.js进行了引入。若定义了多个js文件，在这里都进行引入即可。

实际上，引入mock脚本用的是import，因此该引入操作也可以在具体页面的.vue中进行。只是这样就会将mock局限在某个页面中，其他页面不受影响。考虑到开发的方便性，推荐在主入口js中进行引入。

四．在.vue文件中使用

这里使用Vue的fectch请求：

stream.fetch({
        method: 'GET',
        url:'http://localhost/test/getInfo',
        type:'json'
    }, function(ret){
        console.log(ret);
    }
);

当执行该请求后，Mock就会按用户定义的js来对请求进行匹配。

若请求的url匹配成功，则拦截该请求，并返回用户定义的数据；若匹配不成功，则按正常请求处理。

也就是说，Mock只拦截js中配置的请求，对于没有配置的请求不拦截。

Vue中使用Mock：单元测试

在Vue中使用Mock

猜你喜欢