VSCode调试控制台调用screen.debug报错：screen.debug is not a function怎么办？

遇到screen.debug is not a function的报错，核心原因是调试上下文未正确获取到screen实例或debug方法未被暴露，可通过以下方式解决：

• 确保测试代码中正确初始化screen
  测试文件里必须先导入并实际使用screen，比如：

  import { screen, render } from '@testing-library/react';
  
  test('示例测试', () => {
    render(<YourComponent />);
    // 调用一次screen方法触发实例初始化
    screen.getByText('测试文本');
    // 在此处打断点
  });
  

  此时在调试控制台直接调用screen.debug()即可，因为函数作用域里已经有可用的screen实例。

• 调试控制台手动引入screen
  如果调试全局上下文没有screen，可以在控制台通过require直接获取：

  const { screen } = require('@testing-library/react');
  screen.debug(你的元素);
  

  TypeScript项目可忽略类型提示直接执行这段代码。

• 将screen挂载到全局变量
  在测试代码里把screen赋值给全局对象，方便调试时直接访问：

  import { screen } from '@testing-library/react';
  
  test('示例测试', () => {
    globalThis.testScreen = screen;
    render(<YourComponent />);
    // 在此处打断点
  });
  

  调试时直接在控制台调用testScreen.debug()即可。

• 检查测试环境配置
  如果是vitest项目，确保vitest.config.ts中配置了正确的DOM环境：

  export default defineConfig({
    test: {
      environment: 'jsdom', // 必须设置为jsdom，否则testing-library无法正常工作
    },
  });
  

  Jest项目默认已配置jsdom，若有修改需确保环境未被更改。

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