Vitest UI测试日志截断如何解决？如何查看页面渲染状态？

一、查看完整渲染HTML日志 #

设置DEBUG_PRINT_LIMIT和screen.debug()无效的话，试试这些方案：

• 在测试文件顶部强制设置打印限制
  直接在测试文件开头覆盖默认配置：

  process.env.DEBUG_PRINT_LIMIT = '1000000';
  // 针对jsdom环境的额外设置（如果用的是jsdom）
  import { JSDOM } from 'jsdom';
  const dom = new JSDOM('');
  dom.window.debugPrintLimit = 1000000;
  

• 把HTML写入本地文件
  绕过控制台输出限制，直接生成完整的HTML文件：

  import fs from 'fs/promises';
  
  // 放在测试失败的位置，比如catch块里或者断言前
  await fs.writeFile('./test-rendered.html', document.documentElement.outerHTML);
  

  测试跑完后打开test-rendered.html就能看到完整DOM。

• 在Vitest配置里设置jsdom的打印限制
  修改vitest.config.ts：

  export default defineConfig({
    test: {
      environment: 'jsdom',
      environmentOptions: {
        jsdom: {
          debugPrintLimit: 1000000
        }
      }
    }
  });
  

二、在浏览器中查看测试渲染状态 #

两种实用方法：

• 用Vitest的浏览器模式跑测试
  执行命令启动浏览器测试：

  vitest --browser chrome
  

  测试会自动打开Chrome，按F12打开开发者工具，就能实时看DOM、样式和控制台。要调试的话，在测试代码里加debugger，执行到那会自动暂停。

• 启用Vitest调试模式
  运行：

  vitest --debug
  

  跟着提示打开浏览器地址，进入测试页面后开开发者工具，就能查看当前渲染状态，还能断点调试。

内容的提问来源于stack exchange，提问作者AvitanD