Storybook jest 插件不显示结果答案

【问题标题】：Storybook jest addon does not show resultsStorybook jest 插件不显示结果
【发布时间】：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' 吗？另外，您能否发布/展示您正在使用的测试？

标签： javascript reactjs jestjs add-on storybook

【解决方案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 解析

【讨论】：