mthuret / storybook-addon-specifications

:book: Write tests next to your stories and display their results inside storybook interface

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Storyshot test is not failing when spec test fails, while run outside the Storybook

faizalMo opened this issue · comments

Hi,
I have CRA based react app where I have setup Storybook + storyshots + specifications addon. I am able to start Storybook and see the Specifications addon working fine. I can also run the test by itself using "react-scripts test" and I can see the snapshots are being generated and test pass/fail accordingly. However, if there is a Specification test failing, it does not show as a failing test by Storyshot. Is there a way to get it working so that Storyshot test fails when the Spcifications "expects" fails?

Error.stories.js

import React from 'react';
import { specs, describe, it } from 'storybook-addon-specifications';
import { mount } from 'enzyme';
import expect from 'expect';

import Error from '../../src/components/Error';

export default {
  title: 'Components|Error',
  component: Error
};

export const Simple = () => <Error></Error>;

specs(() => describe('Simple', () => {
  it('Should have the right image and texts', () => {
      let output = mount(<Simple />);
      expect(output.find('img').props().alt).toEqual('An error has occured');
      expect(output.find('h1').text()).toEqual('Something went wong :(');
  }); 
}));

.storybook/config.js

import { configure as configureStories, addDecorator } from '@storybook/react';
import requireContext from 'require-context.macro';
import StoryRouter from 'storybook-react-router';
import {configure as configureEnzyme} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import '../public/css/bootstrap.min.css';

addDecorator(StoryRouter());

/* add main-holder class to reflect all the styles as per the tenants */
function loadStories() {
  document.body.className += ' ' + 'main-holder';
  return requireContext('../stories', true, /\.stories\.js$/);
}

configureEnzyme({ adapter: new Adapter() });
configureStories(loadStories(), module);

error

So, even after adding the facade.js to switch between the jest apis and the addon-spec APIs to get both spec and storyshots working at the same time, I had other difficulties(jasmine complaining about not able to run nested 'it') in getting that setup to work. I ended creating to separate test setup, the CRA based setup for Storyshots snapshot testing and another jest config to run my enzyme tests, which I did on top of the exported stories.

I am going to close this issue as I am not pursuing the said approach anymore. Cheers.