问答 vue 代码覆盖率怎么实现?

spxinjie6 · 2024年08月29日 · 最后由 teessstttt 回复于 2024年09月06日 · 6841 次阅读

写在开头,本人运维, 之前 java 及 lua 的代码覆盖率工程已经完成,最近正在学习 istanbul, 公司内常用的前端组件是 VUE, 想着把前端的代码覆盖率也实现一下。

我发现 (可能我也是积累不足),vue 覆盖率这块的文档几乎没有。

我在本站学习了大佬的 自动化工具 React Native 代码覆盖率获取探索 (二)

按照文档 部署了 istanbul-middleware 感觉这个挺好用。

我参考大佬的文档,发现自己还是不太理解。

项目初始化

vue init webpack istanbul_middleware_demo

建立 middleware 后台服务 项目根目录下新增 server.js

const path = require('path')
const cors = require('cors')
const express = require('express');  
const coverage = require('istanbul-middleware');

console.log("DEBUG")
coverage.hookLoader('src', { verbose: true });

const app = express();  
const PORT = process.env.PORT || 3000;  

app.use(cors());


// console.log(path.resolve(__dirname, 'src'))

// 中间件、路由等  
app.get('/', (req, res) => {  
  res.send('Hello from Express!');  
});  

app.use('/coverage', coverage.createHandler({ verbose: true, resetOnGet: true }));


app.listen(PORT, () => {  
  console.log(`Server running on port ${PORT}`);  
});

封装请求 src/api/api.js

// 引入axios  
import axios from 'axios';  

// 封装POST请求  
export function postData(url, data) {  
  return axios.post(url, data, {headers: {'Content-Type': 'application/json'}})  
    .then(response => {  
      // 可以在这里处理响应数据,但通常直接返回给调用者  
      return response.data;  
    })  
    .catch(error => {  
      // 处理错误,可以抛出错误或者返回错误信息  
      console.error('Error posting data:', error);  
      throw error;  
    });  
}

然后在 src/components/HelloWorld.vue 下 增加定时请求

import {postData} from '../api.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    sendDataToServer() {
      const url = 'http://127.0.0.1:3000/coverage/client';

      postData(url, JSON.stringify(window.__coverage__)).then(res => {
        console.log(res)
      })
    }
  },
  mounted() {
    this.intervalId = setInterval(this.sendDataToServer, 10000); 
  },
  beforeDestroy() {  
    // 清除定时器  
    clearInterval(this.intervalId);
  },  
}

启动 server.js

node server.js
访问 127.0.0.1:3000 浏览器返回

访问 127.0.0.1:3000/coverage 浏览器返回

请问大佬,应该怎么对 vue 项目进行插桩,实在是不太理解前端这方面,请各位大佬指导,谢谢

demo 已上传 git, istanbul_middleware_demo .

共收到 3 条回复 时间 点赞

我之前文章里有提到,通过 nyc 命令可以插桩:

你试下对编译后的 js,用类似的命令插桩下,看看效果?

PS:我这个文章已经是 17 年的了,不确定现在是否还可以用,建议你到 vue 社区里问下,可能会有更好的答案。

陈恒捷 回复

好的,麻烦大佬了,已经做了一个小 demo , 还在测试阶段

请问 java 的覆盖率 是已经在项目应用了吗,还是只是 demo 层面

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册