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"
},
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');