Аддон Storybook jest не показывает результатов

#javascript #reactjs #jestjs #add-on #storybook

#javascript #reactjs #jestjs #дополнение #сборник рассказов

Вопрос:

Я использую этот аддон с сборником рассказов версии 6:

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

Поскольку я хочу отобразить результаты теста jest для каждой истории, но он не отображает результаты 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',
  },
};
 

И result json:

 {
  "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": ""
  }
 

Комментарии:

1. Экспортируете ли вы '@storybook/addon-jest' в .storybook/main.js файл? Кроме того, не могли бы вы опубликовать / показать свой тест, который вы используете?

Ответ №1:

Я столкнулся с такой же проблемой, как у вас, я нашел проблему на github storybook, которая решила проблему.

В основном, в вашем 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