Storybook: A11y addon throws error when used with Vue/Angular

[aminimalanimal]

Bug summary

When I attempt to use the A11y add-on with Vue, the screen goes red and I receive the following error:

Cannot add property components, object is not extensible

I've added the complete output later in this description.

Steps to reproduce

I have registered the A11y add-on within .storybook/addons.js as described in the documentation:

import '@storybook/addon-a11y/register'

DemoComponent.vue

<template>
  <div>lorem ipsum</div>
</template>

DemoComponent.story.js

import { storiesOf } from '@storybook/vue'
import { checkA11y } from '@storybook/addon-a11y'
import DemoComponent from './DemoComponent.vue'

storiesOf('DemoComponent', module)
  .addDecorator(checkA11y)
  .add('default', () => {
    return {
      components: {
        DemoComponent,
      },
      template: `<demo-component />`
    }
  })

When I remove .addDecorator(checkA11y) from the story, this works. I can also use the Knobs decorator successfully.

Storybook and Addon versions

• @storybook/vue: 3.4.8
• @storybook/addon-a11y 3.4.8

Error Output and Attempts at Debugging

The storybook stage is taken over with the following error output:

Cannot add property components, object is not extensible

TypeError: Cannot add property components, object is not extensible
at http://localhost:9001/static/preview.bundle.js:53319:33
at renderMain (http://localhost:9001/static/preview.bundle.js:54525:27)
at renderPreview (http://localhost:9001/static/preview.bundle.js:54554:12)
at renderUI (http://localhost:9001/static/preview.bundle.js:53370:26)
at Object.dispatch (http://localhost:9001/static/preview.bundle.js:50270:7)
at http://localhost:9001/static/preview.bundle.js:53344:16
at http://localhost:9001/static/preview.bundle.js:49418:62
at Array.forEach ()
at Channel._handleEvent (http://localhost:9001/static/preview.bundle.js:49417:19)
at PostmsgTransport._handleEvent (http://localhost:9001/static/preview.bundle.js:48799:16)

The function throwing the error is:

var decorateStory = function decorateStory(getStory, decorators) {
  return decorators.reduce(function (decorated, decorator) {
    return function (context) {
      var story = function story() {
        return decorated(context);
      };
      var decoratedStory = decorator(story, context);
      decoratedStory.components = decoratedStory.components || {};
      decoratedStory.components.story = createWrapperComponent(story());
      return decoratedStory;
    };
  }, getStory);
};

This is the breaking line:

decoratedStory.components = decoratedStory.components || {};

I placed a breakpoint on that line and copied decoratedStory:

{
  "key": null,
  "ref": null,
  "props": {
    "context": {
      "kind": "DemoComponent",
      "story": "default"
    },
    "channel": {
      "_sender": "35d143e6c7673",
      "_transport": {
        "_config": {
          "page": "preview"
        },
        "_buffer": []
      },
      "_listeners": {
        "setCurrentStory": [
          null
        ]
      }
    }
  },
  "_owner": null,
  "_store": {}
}

It should be noted that this object doesn't have all of the data logging this out yourself will provide. I can see, for example, that $$typeof: Symbol(react.element) is also on it.

I hope that this information is helpful in resolving the issue. I'm not really sure what I should expect to see in the decoratedStory object or if there's anything I can do to resolve this.

[agnislav]

I'm experiencing exactly the same issue with Angular.

[Eelsie]

I have exactly the same issue and identical error in Vue components.

[Keraito]

@aminimalanimal @agnislav @Eelsie sorry for only answering back now.

@storybook/vue: 3.4.8
@storybook/addon-a11y 3.4.8

The problem is that you're using stable release, which does not contain changes that made the addons framework agnostic (https://github.com/storybooks/storybook/blob/release/3.4/ADDONS_SUPPORT.md, branch release/3.4). The documentation on the master branch is for the latest alpha release, which does contain these changes. So you should upgrade your version of storybook to one of the alpha versions (at least v4.0.0-alpha.7). Sorry for the confusing documentation, it's something we're aware of and will be addressed in the nearby future.

[Eelsie]

Thanks a lot! I will do that!

[aminimalanimal]

I got the environment running with addon-a11y by updating all of my @storybook/ dependencies to 4.0.0-alpha.14 and installing all peer dependencies as dev dependencies. Somehow it wasn't previously necessary for me to install react and react-dom to get Storybook working (should these really be peer dependencies if Storybook directly relies on them?).

axe.js now throws an error in the console each time I load a story. (It does re-run and work, though.)

index.js:16 Error: Expect axe._selectorData to be set up
at generateSelector (axe.js:2810)
at Object.createUniqueSelector [as getSelector] (axe.js:2866)
at DqElement.get selector [as selector] (axe.js:2265)
at axe.js:1262
at Array.map ()
at axe.js:1255
at Array.map ()
at axe.js:1252
at Array.forEach ()
at Object../node_modules/axe-core/axe.js.helpers.processAggregate (axe.js:1244)

function generateSelector(elm, options, doc) {
    if (!axe._selectorData) {
      throw new Error('Expect axe._selectorData to be set up');
    }

I see that react-axe ran into this issue and corrected it by waiting a little bit before running axe. Maybe this add-on needs to do something similar?

I'm happy to open a new issue (and close this one) if you'd prefer, @Keraito.

[Keraito]

@aminimalanimal that sounds unrelated to the original problem in this issue, so let's close this one and open a new one yes.

[matthewharwood]

@Keraito Did you open that new ticket? still getting this bug?

[ReDrUm]

Yes, I'm still receiving the Error: Expect axe._selectorData to be set up with v4.0.0-alpha.14 with react.

[aminimalanimal]

@matthewharwood I think I was supposed to do that, but I haven't found the time to yet. It's in my queue, but feel free to open it before I do.

[kyleoliveiro]

This is happening again with v4.0.0-alpha.20.

[aminimalanimal]

@kyleoliveiro Please open a new ticket for it. I tried upgrading to alpha 20 and it didn't go well for me and I had to reverse the update back to alpha 14, so if you're on 20, you can at least give them an accurate ticket that applies to the version they're currently working on.