1

I am using storybook interactions addon and the play functionality. This is my code:

export default {
  component: MyComponent,
  title: "My Component",
  args: {
    someId: "someId",
  },
  decorators: [
    (Story) => (
      <QueryClientProvider client={queryClient}>
        <Header />
        <Box sx={{ float: "right" }}>
          <Layout>
            <Story />
          </Layout>
        </Box>
      </QueryClientProvider>
    ),
  ],
} as ComponentMeta<typeof MyComponent>;

const Template: ComponentStory<typeof MyComponent> = (args: any) => {
  return <MyComponent {...args} />;
};
export const MyComponentWithInteraction = Template.bind({});
MyComponentWithInteraction.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  const addButton = canvas.getAllByText("+ Add")[0];
  await userEvent.click(addButton);
};

My component appears on my storybook, but the interaction tab shows no interactions:

Interaction tab is empty

These are the packages related to storybook in my devDependencise

    "@storybook/addon-essentials": "6.5.16",
    "@storybook/addon-interactions": "6.5.16",
    "@storybook/addon-knobs": "^6.4.0",
    "@storybook/builder-webpack5": "6.5.16",
    "@storybook/jest": "0.0.10",
    "@storybook/manager-webpack5": "6.5.16",
    "@storybook/react": "^6.5.15",
    "@storybook/testing-library": "0.0.13",
    "@types/storybook__addon-knobs": "^5.2.1",
    "@types/storybook__react": "^5.2.1",
    "msw-storybook-addon": "1.7.0",
    "tsconfig-paths-webpack-plugin": "4.0.0",
    "webpack": "5"

This is my main.ts

module.exports = {
  stories: ["../src/**/*.stories.@(mdx|tsx|ts|jsx|js)"],
  logLevel: "debug",
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-links",
    "@storybook/addon-interactions",
    "msw-storybook-addon",
  ],
  framework: "@storybook/react",
  features: {
    interactionsDebugger: true,
  },
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      include: path.resolve(__dirname, "../src"),
    });
    config.resolve.plugins = [
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, "../tsconfig.json"),
      }),
    ];
    // Return the altered config
    return config;
  },
  core: {
    builder: "@storybook/builder-webpack5",
  },
  docs: {
    autodocs: true,
  },
};

If I add this line of code at the end of my story:

await expect(canvas.getByText("Some text")).toBeInTheDocument();

I see that it fails, because it is comparing it against the initial view before the click. But if I get rid of this line, it shows me the view that is the result of the click. I don't see any running in the control tab of the bottom panel either. This is strange.

Andi Keikha
  • 1,246
  • 2
  • 16
  • 37

2 Answers2

2

I found the issue, although it is not shown in my question, I'm going to answer it here ,maybe I can save someone from spending 3-4 hours on this. my imports looked like this which was wrong:

import { within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

This is the right import

import { userEvent, within } from "@storybook/testing-library";
Andi Keikha
  • 1,246
  • 2
  • 16
  • 37
0

Andi answer probably saved me a lot of time, in my case testcase was being executed but interactions step was visible only when failed. To view Interactions steps it is required to have some user events in testcase like

await userEvent.click(checkbox);
sjanisz
  • 57
  • 8