storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.81k stars 9.34k forks source link

Where should storybook config file be placed? #1075

Closed stereodenis closed 7 years ago

stereodenis commented 7 years ago

I try to place config.js file to: %project%/storybook %project%/App (where __tests__ folder)

App/__tests__/Storyshots-spec.js
  ● Test suite failed to run

    storyshots is intended only to be used with storybook
ndelangen commented 7 years ago

That message is given when storyshots cannot find either @storybook/react or @storybook/react-native in your package.json.

stereodenis commented 7 years ago

@ndelangen, what am I doing wrong?

#npm test
App/__tests__/Storyshots-spec.js
  ● Test suite failed to run

    Your test suite must contain at least one test.

      at onResult (node_modules/jest-cli/build/TestRunner.js:192:18)
      at process._tickCallback (internal/process/next_tick.js:109:7)
#Storyshots-spec.jsec.js
import initStoryshots from '@storybook/addon-storyshots'

initStoryshots()
#config.js
import { configure } from '@storybook/react-native'

configure(() => require('./stories'), module)
#stories/index.js
import React from 'react'
import { storiesOf, action, linkTo } from '@kadira/react-native-storybook'

import Welcome from './Welcome'
import OrderScene from '../../App/Scenes/OrderScene/presenter'

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')} />
  ))

for (const ticketingStatus of ['pending', 'return', 'error', 'success', 'none']) {
  for (const bookingStatus of ['pending', 'cancel', 'error', 'success']) {
    for (const paymentStatus of ['pending', 'refund', 'error', 'success', 'none']) {
      storiesOf('OrderScene', module)
        .add(`booking: ${bookingStatus}\n\npayment: ${paymentStatus}\n\nticketing: ${ticketingStatus}`, () => (
          <OrderScene
            {...{
              bookingStatus,
              ticketingStatus,
              paymentStatus,
              isPayuOrder: false,
              payuPending: false,
              canPay: true,
              passengers: [],
              cityFromName: 'Воронеж',
              cityToName: 'Воронеж',
              orderTripStartDate: '11.01.2017',
              orderTripEndDate: '11.01.2017',
              orderTripStartTime: '08:00',
              orderTripEndTime: '12:00',
            }}
            buyTicket={() => {}}
            returnTicket={() => {}}
            openPdf={() => {}}
          />
        ))
    }
  }
}
shilman commented 7 years ago

@stereodenis I'm not sure about the error, but I did spot one problem. You want:

orderStories =  storiesOf('OrderScene', module)
for( ... ) {
  for ...
    orderStories.add('name', () => <OrderScene ... />)
}

Otherwise it will overwrite the story each time through the for loop.

Does everything show up in Storybook OK?

stereodenis commented 7 years ago

@ndelangen I've clean my stories/index file

import React from 'react'
import { storiesOf, action, linkTo } from '@kadira/react-native-storybook'

import Welcome from './Welcome'

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')} />
  ))

but I still got the same

jest

 FAIL  App/__tests__/Storyshots-spec.js
  ● Test suite failed to run

    Your test suite must contain at least one test.

      at onResult (node_modules/jest-cli/build/TestRunner.js:192:18)
ndelangen commented 7 years ago

The error message you posted originally and are posting now are different!

That last message is related to jest finding a spec / test file with 0 it or test calls in it. A specfile without any tests causes jest to fail, because that should never happen:

why have a testfile but no tests in it?

Either delete the testfile or write some tests in it.

stereodenis commented 7 years ago

@ndelangen I want to use my stories to test snapshots

roman-holovin commented 7 years ago

@stereodenis You are importing import { storiesOf, action, linkTo } from '@kadira/react-native-storybook' and it should be import { storiesOf, action, linkTo } from '@storybook/react-native' or something like this.

I'm using react version, so check precise import for react-native yourself