#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