[question] How to capture arguments passed to storybook actions?

[sw-tracker]

When testing which arguments were given to a storybook action, I use the code given below. However, there are many situations where I do not want to make an exact comparison. For example, list ordering and object IDs.

expect(args.onSubmit).toHaveBeenLastCalledWith(param1, param2);

How can I capture the arguments given to a storybook action into a variable? I can then compare against only parts of that variables, or as I wish.

[yannbf]

Hey @sw-tracker great question! It should work just the same way you would do in a jest test, with the concept of spies.

You can either assert things partially like so:

    await expect(args.onSubmit).toHaveBeenCalledWith(
      expect.stringMatching(/([A-Z])\w+/gi),
      expect.anything(),
    );

Or you can access the mocks via the arg like args.myHandlerName.mock.calls[0], like so:

    const [name, age] = args.onSubmit.mock.calls[0];
    await expect(name).toEqual('John');
    await expect(age).toEqual(25);

Here's the full source as an example:

import { expect } from '@storybook/jest';
import { within, userEvent, } from '@storybook/testing-library';

export const Demo = {
  render: (args) => (
    <button type="button" onClick={() => args.onSubmit('John', 25)}>
      Click
    </button>
  ),
  argTypes: {
    onSubmit: { action: true },
  },
  play: async ({ args, canvasElement }) => {
    await userEvent.click(within(canvasElement).getByRole('button'));
    await expect(args.onSubmit).toHaveBeenCalledWith(
      expect.stringMatching(/([A-Z])\w+/gi),
      expect.anything(),
    );

    // or get the args directly instead
    await userEvent.click(within(canvasElement).getByRole('button'));
    const [name, age] = args.onSubmit.mock.calls[0];
    await expect(name).toEqual('John');
    await expect(age).toEqual(25);
  }
};

I hope this helps!