3.6 jest使用jest-html-reporters

关注

原创最新推荐文章于 2026-08-06 12:36:51 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

Vue组件单元测试实战：Jest沙盒化测试原理与落地 Vue组件是响应式数据、生命周期、事件系统与DOM渲染的耦合体，其行为验证不能依赖人工点击或视觉判断。Jest通过轻量沙盒环境实现输入可控（props/slots/mock）、触发可模拟（事件/nextTick）、断言可证伪（DOM/事件/调用），将组件行为转化为确定性代码逻辑。它不绑定Vue版本，兼容Options API与Composition API，配合vue-test-utils形成覆盖Vue 2.x至3.x的稳定测试链路。典型应用场景包括异步数据加载、动态表单交互、路由参数依赖及插槽条件渲染—— 阅读详情

官方地址：https://github.com/roughsoft/jest-html-reporters

注意，是jest-html-reporters，不是jest-html-reporter

一、直接安装

npm install jest-html-reporters

二、在jest.config.js中添加配置文件

const moment = require('moment');
const date = moment(new Date()).format('YYYY-MM-DD-HH-mm-ss');
module.exports = {
    testEnvironment: "node",
    reporters:[
        "default",
        [
            "jest-html-reporters",
            {
                "pageTitle":"Jest Report",
                "filename":`./report/child/${date}.html`,
                "expand":true
            }
        ]
    ],
};

filename中的目录需要提前建好

收录于