Access to the navigation actions through interaction tests?

[majoncas-ue]

In storybook we are able to access actions trigerred from a story that are seen in the Actions tab through the parameters second argument from a "play" function and then I can validate that this action has been called. I'd like to be able to do the same thing but to access the "React router" tab actions. Basically I wish I could assert that a navigation action has been called upon clicking on my link. Is there any workaround ?

[majoncas-ue]

Finally I ended up implementing some decorators to get around this!

[JesusTheHun]

Do you mind sharing them?

[majoncas-ue]

Sure, here is the thread from Storybook Discord channel https://discord.com/channels/486522875931656193/1101148717349879892/1101149294515474443

[DaveEvans-Thalamos]

My workaround looks like this. My solution is in Cypress, but the core recipe should be portable to other testing libraries. Hope that's useful to someone else.

// cypress/support/commands.ts
import { addons } from "@storybook/preview-api";

// Spy on a storybook react-router action
Cypress.Commands.add("spyOnStorybookRouterNavigation", () => {
  const stub = cy.stub().as("reactRouter");
  addons.getChannel().on("storybook/react-router-v6/navigation", (event) => {
    if (event?.type === "storybook/react-router-v6/navigation") {
      stub(event.data.path);
    }
  });
});

declare global {
  namespace Cypress {
    interface Chainable {
      spyOnStorybookRouterNavigation(): Chainable<void>;
    }
  }
}