CODEWITHSUNDEEP
javascriptreactjsjestjsadd-onstorybook
RyanP13
RyanP13

Reputation: 7743

Storybook jest addon does not show results

I am using this addon with Storybook version 6:

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

As I want to display the jest test results for each story but it does not display the jest results despite the following configuration:

/* 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',
  },
};

And the 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": ""
  }

Upvotes: 1

Views: 993

Answers (1)

Francesco Vattiato
Francesco Vattiato

Reputation: 488

I have faced a similar issue as yours, I have found an issue on storybook's github which solved the problem.

Basically, on your main.js file:

    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;
  }

You should add path alias which is going to be resolved with path-browserify

Upvotes: 2

Related Questions