使用web-test-runner（wtr）测试超时问题求助

我使用npm脚本"test": "wtr"（即web-test-runner，该工具依赖的mocha仅在package-lock.json中可见）运行测试时，出现如下超时错误：

Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.

我已尝试使用done()、setTimeout()、修改脚本为"wtr --timeout 10000"等方法，问题仍未解决。以下是我的测试代码和web-test-runner配置文件，附排查思路：

测试代码 #

import { expect } from '@open-wc/testing';
import * as stories from '../../stories/analytical-dashboard.stories.js';

describe('test', () => {
  it('should render', async () => {
    const story = await storyFixture(stories.AnalyticalDashboard, { render });
    expect(story.shadowRoot).to.exist;
  });
});

Web Test Runner 配置文件 #

export default {
  nodeResolve: true,
  files: [
    'src/**/*.test.js',
  ],
  filterBrowserLogs: log =>
    !log.args.some(
      e =>
        e?.includes?.('https://lit.dev/msg/dev-mode') ||
        e?.includes?.('https://lit.dev/msg/multiple-versions') ||
        e?.includes?.('analytics'),
    ),
  middleware: [
    backendProxyMiddleware({
      redirectTarget: '/',
      presets: [
        presets.NL,
        presets.BE
      ],
    }),
  ],
  browserStartTimeout: 60000,
};

排查思路 #

• 检查storyFixture的Promise状态：storyFixture返回的Promise可能未正确resolve，比如组件内部的异步操作（数据请求、动画）未完成导致pending。可以在await前后添加日志，或用Promise.race搭配临时超时逻辑，定位是否是该方法的问题。
• 给单个测试用例单独设置超时：在it方法的第三个参数中指定超时，比如it('should render', { timeout: 10000 }, async () => { ... })，比全局设置更精准，避免影响其他测试。
• 排查代理中间件的影响：配置中的backendProxyMiddleware可能导致请求延迟或失败，若组件依赖后端接口，请求挂起会卡住测试。可临时注释该中间件，测试是否还超时，判断是否是代理导致的问题。
• mock组件的异步依赖：AnalyticalDashboard组件可能依赖外部资源（第三方脚本、数据接口），这些资源加载慢或失败会导致渲染不完成。在测试中mock这些依赖（比如手动模拟接口返回），避免真实请求阻塞测试。
• 正确配置mocha测试超时：web-test-runner的--timeout参数是设置浏览器启动超时，而非测试用例超时。需在配置文件中添加测试框架的超时配置：

  // web-test-runner.config.js
  export default {
    // 其他原有配置
    testFramework: {
      config: {
        timeout: 10000 // 这里设置mocha测试用例的超时时间
      }
    }
  };
  

• 查看完整浏览器日志：临时关闭filterBrowserLogs配置，查看测试过程中是否有组件渲染失败、资源加载错误等日志，这些错误可能导致Promise无法resolve。

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