mthuret/storybook-addon-specifications

Error Message Cannot read property 'wrongResults' of undefined in console when trying to access a story.

Opened this issue · 5 comments

Issue details

There is an error message when I open Storybook and I try to access one of my Stories.

Uncaught TypeError: Cannot read property 'wrongResults' of undefined
    at Specifications.render (manager.bundle.js:63366)
    at finishClassComponent (manager.bundle.js:54231)
    at updateClassComponent (manager.bundle.js:54208)
    at beginWork (manager.bundle.js:54583)
    at performUnitOfWork (manager.bundle.js:56582)
    at workLoop (manager.bundle.js:56646)
    at HTMLUnknownElement.callCallback (manager.bundle.js:46900)
    at Object.invokeGuardedCallbackDev (manager.bundle.js:46939)
    at invokeGuardedCallback (manager.bundle.js:46796)
    at renderRoot (manager.bundle.js:56724)

The above error occurred in the <Specifications> component:
    in Specifications
    in Specifications
    in div (created by DownPanel)
    in div (created by DownPanel)
    in div (created by DownPanel)
    in DownPanel (created by Container(DownPanel))
    in Container(DownPanel) (created by Layout)
    in div (created by Layout)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by Layout)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by Layout)
    in div (created by Layout)
    in Layout (created by Container(Layout))
    in Container(Layout)
    in div

Steps To Reproduce:

My tests are in a separate file from the stories. I used the instructions from the README.md

  1. I open my StoryBook and by default it will take me to the first story of my StoryBook:
    This default story hasn't tests written yet. For some reason the specs addon runs all the tests and shows the results in all the stories.

http://localhost:6006/?selectedKind=Styleguide&selectedStory=Fonts&full=0&down=1&left=1&panelRight=0&downPanel=storybooks%2Fstorybook-addon-knobs

 -  My tests results are not coming up in the specification tab yet.
  1. I reload the page (F5)

    • My Test Results are now coming up in the Specifications tab of my default selected story (same URL as above)
  2. I click on a different story from the left hand side panel (this time, this is the one that my tests use) .

RESULT:

White Screen comes up, yarn log does not display the error message. The error is displayed in the browsers console. And Story book does not longer shows any data at all.

This is the URL of my story:

http://localhost:6006/?selectedKind=Button&selectedStory=Default&full=0&down=1&left=1&panelRight=0&downPanel=storybook-addon-specifications%2Fspecifications-panel

VERSIONS

storybook/react 3.2.17
storybook/addon-actions: ^3.2.17
storybook/addon-info: ^3.2.13
storybook/addon-knobs: ^3.2.17
storybook/addon-links: ^3.2.13
storybook/addons: ^3.2.17
react 16.1.1
enzyme": "^3.2.0
enzyme-adapter-react-16": "^1.1.0

Has the same issue with

  • storybook/addon-actions "3.3.3",
  • storybook/addon-knobs "3.3.3",
  • storybook/addon-links "3.3.3",
  • storybook/react "3.3.3",
  • react "16.2.0",
  • enzyme "3.3.0",
  • enzyme-adapter-react-16 "1.1.1",

I encountered the same issue when I add tests to the story with jest, and skipping describe():

import { ... } from './.storybook/facade'

storiesOf('TimerDisplay', module)
  .add('story 1', () => {
    // this works fine
    specs(() => describe('story 1', () => {
      it('story 1', () => { ... })
    })
  })
  .add('story 2', () => {
    // this throws 'Cannot read property 'wrongResults' of undefined'
    specs(() => it('story 2', () => { ... })
  })

I want to skip the describe() because the TimerDisplay is a simple and stateless component. Thus each story describes the expectation of how it should render, and the test just verify the same thing.

So in such case, the story and the test are 1-1 map and does not need to have an extra grouping by wrapping it in describe().

getting the same thing...

I was running into this error because I wasn't returning describe() inside specs():

// causes "Cannot read property 'wrongResults' of undefined" error
specs(() => {
  describe('some test', () => {})
})
// works!
specs(() => 
  describe('some test', () => {})
)