[8.0 QA] Explicit Actions Args Mocking

[vanessayuenn]

Explicit Actions Args Mocking

Feature owner: @kasperpeulen

Please comment in this discussion thread for any bug report and feedback for this feature as you test out Storybook 8. Kindly adhere to the following format:

Project: Name of your project as entered in Notion
Version: The version of storybook you tested with
Bug/feedback: Details of the bugs/feedback you have

Feature owner should triage the comments here frequently and open issues as needed.

[yannbf]

Project: MealDrop
Version: 8.0.0-alpha.10
Bug/feedback:

When upgrading Storybook and running tests using portable stories (React), there's an error: Object.defineProperty called on non-object:

The issue seems to happen when composeStories is called on a story file that invokes anything from @storybook/test.
This issue was introduced in alpha 10, potentially from this PR

Reproduction:

1. Access https://github.com/yannbf/mealdrop/tree/bug/portable-stories-expect
2. Run yarn install and yarn test

Here are the two places to focus on:

• Test file
• Story file

[vanessayuenn]

tracked in #25794

[shilman]

Project Storyblok
Version 8.0.0-alpha.15

I added the following story:

import { userEvent, within, expect } from '@storybook/test'
import SbButton from './SbButton.vue'

export default {
  component: SbButton,
  argTypes: {
    handleClick: { type: 'function' },
  },
  parameters: {
    actions: { argTypesRegex: '^handle[A-Z].*' },
  },
}

export const Default = {
  args: {
    label: 'Hmmhahahah',
    size: 'large',
  },
}

export const Click = {
  ...Default,
  play: async (context: any): Promise<void> => {
    const { canvasElement } = context
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole('button'))
    expect(context.args.handleClick).toHaveBeenCalled()
  },
}

export const ClickMocked = {
  ...Click,
  args: {
    ...Click.args,
    handleClick: fn(),
  },
}

It gives the following error in both the UI and the browser console, which seems incorrect:

[shilman]

The ClickMocked also doesn't work, but I suspect it's something to do with the args not getting passed correctly as events to the Vue component. @kasperpeulen do you know the fix here off the top of your head?

[vanessayuenn]

tracked #25810