javascriptstorybookchromatic

Is there a way to access values from the Actions tab in Storybook?


I'm using Chromatic to run interaction tests. When I click the button for "Mexican" cuisine, it appends to the url params. Storybook reflects this in the "Actions" tab (shown below). How can I access those Actions so that I can run an assertion against them?

  play: async ({canvasElement}) => {
    const canvas = within(canvasElement);
    userEvent.click(await canvas.findByRole('button', {name: 'Mexican'}));
    // expect that nextRouter.push is called with the value "?cuisineOption=MEXICAN"
  },

Actions


Solution

  • There is currently no first-class way to do this in Storybook. I was able to get this very hacky solution to work for me:

    let pushCalls: any[][] = [];
    const afterEach = () => {
      pushCalls = [];
    };
    const channel = addons.getChannel();
    channel.on(FORCE_REMOUNT, afterEach);
    channel.on(STORY_RENDER_PHASE_CHANGED, ({newPhase}) => {
      if (newPhase === 'loading') afterEach();
    });
    

    Then in your component you can mock the router like so:

      parameters: {
        nextjs: {
          router: {
            push: (...args: any[]) => {
              action('nextRouter.push')(...args);
              pushCalls.push(args);
              return Promise.resolve(true);
            },
          },
        },
      },
    

    Then you can create assertions:

    expect(pushCalls[0][0]).toEqual('/?cuisineOption=MEXICAN');