如何调试Storyshots测试生成失败问题？

我在开发一个使用Storybook及Storyshots插件的项目，Jest会基于Storybook故事生成测试用例。但当测试生成流程出错时，Jest仅返回提示：Your test suite must contain at least one test.，无法获取准确的错误详情。此前已有大量可用测试用例，但单个存在问题的故事就会导致所有测试归零，想知道是否有办法获取更精准的错误信息？

完整错误栈 #

FAIL  ./storyshots.test.ts
  ● Test suite failed to run

    Your test suite must contain at least one test.

      at onResult (node_modules/@jest/core/build/TestScheduler.js:175:18)
      at node_modules/@jest/core/build/TestScheduler.js:304:17
      at node_modules/emittery/index.js:260:13
          at Array.map (<anonymous>)
      at Emittery.Typed.emit (node_modules/emittery/index.js:258:23)

我的initStoryshots调用代码 #

initStoryshots({
  framework: 'react',
  configPath: path.join(__dirname, '.storybook'),
  integrityOptions: { cwd: path.join(__dirname, 'src') },
  test: multiSnapshotWithOptions(),
});

解决方案 #

• 添加错误捕获钩子：在initStoryshots配置中加入beforeTest钩子，手动触发故事渲染并捕获错误：

  initStoryshots({
    framework: 'react',
    configPath: path.join(__dirname, '.storybook'),
    integrityOptions: { cwd: path.join(__dirname, 'src') },
    test: multiSnapshotWithOptions(),
    beforeTest: (story) => {
      try {
        React.createElement(story.component);
      } catch (err) {
        console.error(`故事 ${story.kind} - ${story.name} 渲染失败:`, err);
        throw err;
      }
    },
  });
  

• 分步排查单个故事：临时通过storyKindRegex只匹配单个故事分类，逐个定位问题故事：

  initStoryshots({
    // ...其他配置
    storyKindRegex: /^目标故事分类名$/, // 替换为具体的故事分类
  });
  

• 启用调试日志：运行测试时添加环境变量或参数，获取Storyshots的详细运行日志：

  DEBUG=storyshots* npm test storyshots.test.ts
  # 或者添加Jest verbose模式
  npm test storyshots.test.ts -- --verbose
  

• 检查Storybook本身：单独启动Storybook，确认所有故事能正常渲染，排除组件本身或Storybook配置的问题。

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