免责声明:由于信息是自动生成的，可能存在不准确的情况。

1. 在 addons/coverage/src/index.ts 中注册插件：

import { addons, types } from '@storybook/addons';
import { ADDON_ID, PANEL_ID } from './constants';
import { CoveragePanel } from './CoveragePanel';

addons.register(ADDON_ID, () => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'Coverage',
    render: CoveragePanel,
  });
});

1. 为 UI 创建 addons/coverage/src/CoveragePanel.tsx :

import React from 'react';
import { useParameter } from '@storybook/api';
import { PARAM_KEY } from './constants';

export const CoveragePanel: React.FC = () => {
  const coverageData = useParameter(PARAM_KEY, null);
  return (
    <div>
      {coverageData ? (
        <pre>{JSON.stringify(coverageData, null, 2)}</pre>
      ) : (
        <p>No coverage data available</p>
)}
</div>
  );
};

1. 更新 addons/coverage/src/constants.ts :

export const ADDON_ID = 'storybook/coverage';
export const PANEL_ID = `${ADDON_ID}/panel`;
export const PARAM_KEY = 'coverage';

1. 修改 addons/coverage/src/preview.ts 以设置覆盖数据：

import { addons } from '@storybook/addons';
import { PARAM_KEY } from './constants';

addons.setConfig({
  [PARAM_KEY]: window.__coverage__ || null,
});

关于 Greptile

此响应为您提供研究的起点，而非精确解决方案。
帮助我们改进！如果这有帮助，请留下一个 👍，如果无关，请留下一个 👎。