search

storybookjs / testing-vue

MIT License
10 stars 6 forks source link

[Bug] Property or method is not defined... / Invalid handler for event... #6

Open K-Schaeffer-LOG opened 2 years ago

K-Schaeffer-LOG commented 2 years ago

Describe the bug

I have a story with some actions defined in argTypes:

 argTypes: {
    actionButtonText: {
      control: 'text',
      description: 'Text to render in actionButton. Requires actionButton true to be rendered'
    },
    clickAction: { 
      action: 'click:action', 
      table: { disable: true }
    },
    clickDismiss: { 
      action: 'click:dismiss', 
      table: { disable: true }
    },
};

I also have those actions defined in my template:

    <l-toast-content 
      v-bind="$props" 
      @click-dismiss="clickDismiss"
      @click-action="clickAction"
    />

The click-dismiss and click-action are the emitted events from the component, and the clickDismiss and clickAction are those defined in the argTypes.

The issue is that when I run my unit testes using composeStories I got some warns in the terminal. They don't make the test fail, though I don't think that this is expected. The warns are:

[Vue warn]: Property or method "clickDismiss" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

  console.error node_modules/vue/dist/vue.common.dev.js:630
    [Vue warn]: Property or method "clickAction" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

  console.error node_modules/vue/dist/vue.common.dev.js:630
    [Vue warn]: Invalid handler for event "click-dismiss": got undefined

  console.error node_modules/vue/dist/vue.common.dev.js:630
    [Vue warn]: Invalid handler for event "click-action": got undefined

I think that It can be related to the way components are rendered from the stories.

Steps to reproduce the behavior

  1. Create component docs with actions as events
  2. Run a unit test of this component with composeStories

Expected behavior

It shouldn't show those warns.

Environment