Storybook jest 插件不显示结果

Posted 2023-02-19

【中文标题】Storybook jest 插件不显示结果

【英文标题】：Storybook jest addon does not show results

【发布时间】：2021-03-05 12:40:15

【问题描述】：

我在 Storybook 版本 6 中使用这个插件：

https://www.npmjs.com/package/@storybook/addon-jest

因为我想显示每个故事的开玩笑测试结果，但尽管进行了以下配置，但它不显示开玩笑结果：

/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import  DocumentUploadStatus  from '@/models/document';
import  Meta, Story  from '@storybook/react/types-6-0';
import  withTests  from '@storybook/addon-jest';
import results from '@/test/reports/jest-test-results.json';
import UploadState,  UploadStateProps  from './UploadState';

export default 
  title: 'UploadState',
  component: UploadState,
  decorators: [withTests( results, filesExt: '.spec.tsx' )],
 as Meta;

const Template: Story<UploadStateProps> = args => <UploadState ...args />;

export const InProgress = Template.bind();
InProgress.args = 
  progress: 50,
  filename: 'file.txt',
  status: DocumentUploadStatus.IN_PROGRESS,
;

export const WithTests = (): string =>
  'This story shows test results for <UploadState />';
WithTests.story = 
  parameters: 
    jest: 'UploadState',
  ,
;

还有resultjson：

  "assertionResults": [
      "ancestorTitles": ["<UploadState />"],
      "failureMessages": [],
      "fullName": "<UploadState /> should render default state",
      "location": null,
      "status": "passed",
      "title": "should render default state"
    , 
      "ancestorTitles": ["<UploadState />"],
      "failureMessages": []],
      "endTime": 1605914342915,
      "message": "",
      "name": "/Users/usr/workspace/text-mining-web/src/components/Document/UploadList/UploadList.spec.tsx",
      "startTime": 1605914342081,
      "status": "passed",
      "summary": ""
  

【问题讨论】：

您是在 .storybook/main.js 文件中导出'@storybook/addon-jest' 吗？另外，您能否发布/展示您正在使用的测试？

【参考方案1】：

我遇到了和你类似的问题，我找到了一个issue on storybook's github 解决了这个问题。

基本上，在您的main.js 文件中：

    webpackFinal: (config) => 
    // Workaround for @storybook/addon-jest on Webpack 5
    config.resolve = 
      ...config.resolve,
      alias: 
        ...config.resolve.alias,
        path: require.resolve('path-browserify'),
      ,
    ;

    return config;
  

您应该添加路径别名，该别名将通过 path-browserify 解析