"Storybook preview hooks can only be called inside decorators and story functions." error

[neil-morrison44]

Describe the bug

We've got a custom addon that we've written internally to allow us to document / manipulate our i18n translations inside storybooks & we're having trouble getting it to work with this.

So far I've:

• Started to set up @storybookjs/testing-react (which, once we get it working will save a lot of time & be incredibly useful so thanks)
• Noticed that the decorator provided by the addon wasn't being applied (which I guess makes sense? the .storybook/main.js with the addon array isn't referenced anywhere)
• Thought I'd use the setGlobalConfig to manually add in the decorator from our addon
• Got the Storybook preview hooks can only be called inside decorators and story functions. error

Our decorator looks something like:

import React, { useEffect, useState } from "react"
import { I18nContext } from "@our_stuff/i18nContext"
import I18n from "@our_stuff/i18n"
import { makeDecorator, useGlobals, useParameter } from "@storybook/addons"

export const withOurI18n = makeDecorator({
  name: "withOurI18n",
  parameterName: "i18n",
  wrapper: (storyFn, context, { parameters }) => {
    const paramI18nData = useParameter("i18n", {})
    const [{ "our-intl": intlData }] = useGlobals()
    const [i18n, setI18n] = useState(getNewI18nForData(intlData || paramI18nData))

    useEffect(() => {
      if (intlData) setI18n(I18n(intlData))
    }, [intlData])

    return <I18nContext.Provider value={i18n}>{storyFn()}</I18nContext.Provider>
  },
})

(it's rough & has bugs but it works when viewing one story in storybook)

Our jest.setup.js looks like:

import { setGlobalConfig } from "@storybook/testing-react"
import * as globalStorybookConfig from "../.storybook/preview"
import { withOurI18n } from "@our_stuff/storybook-addon-i18n/dist/decorators/withI18n"

setGlobalConfig({ ...globalStorybookConfig, decorators: [withOurI18n] })

At the moment our test looks pretty much exactly like the one in the getting started documentation

Let me know if there's anything else I can provide that'd be useful

Expected behavior
Would expect the decorators to function the same way they do when viewing the story in the storybook.

[yannbf]

Hey @neil-morrison44, thanks a lot for using this library!

I wonder if this way of writing a decorator would work without any issues, achieving the same goal:

import React, { useEffect, useState } from "react"
import { I18nContext } from "@our_stuff/i18nContext"
import I18n from "@our_stuff/i18n"

export const withOurI18n = (storyFn, { parameters, globals }) => {
   const { i18n: paramI18nData = {} } = parameters
   const { "our-intl": intlData } = globals
   const [i18n, setI18n] = useState(getNewI18nForData(intlData || paramI18nData))

    useEffect(() => {
      if (intlData) setI18n(I18n(intlData))
    }, [intlData])

    return <I18nContext.Provider value={i18n}>{storyFn()}</I18nContext.Provider>
}

[neil-morrison44]

Can confirm that using the globals / parameters from the decorator args rather than the @storybook/addons hooks has got me past that issue (and probably makes more sense anyway since they're right there).

Checked if it still works when done via the makeDecorator and it does, think there's some "don't use the decorator if the parameter is missing" stuff in makeDecorator that we'll probably end up using later on.

However from what I can tell the context that's being provided by the decorator isn't available to the rendered component - I've removed the complexity around globals / parameters and I am just reading values from the parameters and putting them straight into the context.

That's unrelated to the above issue so I'm happy for this one to get closed out, thanks.

I'll have a go working through what's happening with the context tomorrow - as far as I can tell it is rendering the provider with the right value but the component is still using the default context.
Any ideas you have / hints at where to look to debug it better would be appreciated

---

Never mind the context issue, was a bit of confusion. (parameter in makeDecorator is already scoped down to the parameter supplied to makeDecorator)

There is one thing that differs between the decorator you suggested & the one using useGlobals etc -- the useGlobals one will re-render when globals update. We need the global update to happen for the storybook UI itself but it's not important for the specs so we can work around it by having two decorators (or doing some process.env switching to tell if we're inside the test run).

[yannbf]

There is one thing that differs between the decorator you suggested & the one using useGlobals etc -- the useGlobals one will re-render when globals update.

Hey @shilman any tips about this (or the issue)?

[shilman]

Sounds to me like it might be a bug in testing-react. There is some extra bookkeeping that needs to happen for storybook hooks to work, and it looks like that's not happening in the composition function.

[smeevil]

I'm running into the same problem using the following:

export const Decorator = (storyFn, context) => {
  const { i18n } = useTranslation()
  useEffect(() => {
    i18n.changeLanguage(context.globals.locale)
  }, [context.globals.locale])

  return (<div>{storyFn()}</div>)
}

The return function normally contains a whole bunch of context providers but I removed them to keep the example short :)

[david-morris]

I'm having the same error, but while viewing stories in storybook. What is a storybook preview hook? Is there documentation on what they are and how they are set up?

[yannbf]

Hey everyone, I found the reason for this issue. The composed story does not contain Storybook specific hooks (like useEffect coming from @storybook/addons) and will fail because the hooks are not provided in the context. I'll try my best to fix it!

[dep]

I'm having the same problem in what I think is a pretty simple story:

import React from "react";
import { Button, Menu, MenuItem } from ".";

const meta = {
  title: "1. Core Components/Menus",
  component: Menu,
  parameters: {
    design: {
      type: "figma",
      url: "https://www.figma.com/file/jh6AQcOATYpxshCcRVOQ6U/IDS---Core-Components?node-id=4658%3A41112",
    },
  },
};

function Menus() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

export default meta;

export { Menus };

Any help is appreciated. Interestingly, switching the Component to use useState as imported from @storybook/addons will cause the story to behave as expected in the browser, BUT the test (react testing library) will fail with the same message. :(

[dep]

In my case it was something inside of the storybook-addon-pseudo-states add-on which was causing my stories to fail. Removing it did the trick for me:

- addons: ["@storybook/addon-docs", "storybook-addon-pseudo-states"],
+ addons: ["@storybook/addon-docs"],

[totszwai]

@yannbf Any update on this? Is there a workaround? Essentially it seems that any decorators trying to pass the context to the story will fail..

addDecorator((Story, context) => {
  const theme = DefaultTheme[context.globals.theme];
  return (
    <MyThemeProvider theme={theme}>
      <Story {...context} /> // <== this will cause the error
    </MyThemeProvider>
  );
});
// */

addDecorator((story) => {
  return (
    <I18NextProvider i18n={i18n}>
      {story()} // <== this would pass
      // but is causing some other weird behavior downstream,
      // like the locales won't change unless I toggle the locales in the toolbar 4 times...
    </I18NextProvider>
  );
});
// */

[anthonyma94]

I'm having the same issue when I use useArgs from @storybook/client-api:

Button.stories.tsx

import React from "react";
import { useArgs } from "@storybook/client-api";
import Button from "./Button";
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { ButtonProps } from ".";

Button.defaultProps = {
  loading: false,
  variant: "contained",
  color: "primary",
  disabled: false,
};

export default {
  component: Button,
  // Any event listeners need to be manually defined
  argTypes: {
    onClick: {
      name: "onClick",
      type: { name: "function" },
      description: "onClick event",
    },
    variant: {
      name: "variant",
      type: { name: "enum" },
    },
  },
} as ComponentMeta<typeof Button>;

const ToggleTemplate: ComponentStory<typeof Button> = (args: ButtonProps) => {
  // useArgs allow for programatic changes to args (controls)
  const [_, updateArgs] = useArgs();

  const toggleFunc = () =>
    updateArgs({
      toggle: { ...args.toggle, toggleFunc, value: !args.toggle?.value },
    });

  return (
    <Button
      {...args}
      toggle={{
        ...args.toggle,
        toggleFunc,
        value: args.toggle?.value ?? false,
      }}
    />
  );
};

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Basic = Template.bind({});
export const CustomColor = Template.bind({});
export const Loading = Template.bind({});
export const Toggle: typeof ToggleTemplate = ToggleTemplate.bind({});
export const ToggleAlt = ToggleTemplate.bind({});

Basic.args = {
  children: "Hello World",
};

CustomColor.args = {
  children: "This color is #cf0cb8",
  customColor: "#cf0cb8",
};

Loading.args = {
  children: "Loading",
  loading: true,
};

Toggle.args = {
  children: "Toggle me!",
  toggle: {
    toggleFunc: () => {},
    value: false,
  },
};

ToggleAlt.args = {
  children: "Toggle me!",
  toggle: {
    toggleFunc: () => {},
    value: true,
  },
};

Button.spec.tsx

import React, { useRef, useState } from "react";
import "@testing-library/jest-dom/extend-expect";
import { render, waitFor, cleanup } from "../test-setup";
import Button, { ButtonProps } from "./Button";
import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { setGlobalConfig, composeStories } from "@storybook/testing-react";
import * as stories from "./Button.stories";
import * as sbPreview from "../../../.storybook/preview";

setGlobalConfig(sbPreview);

const { Toggle } = composeStories(stories);

describe("Button", () => {
  beforeEach(() => {});
  afterEach(() => {
    cleanup();
  });

  it("should change toggle view", async () => {
    const user = userEvent.setup();
    const component = render(<Toggle>Test toggle</Toggle>);
    const { rerender } = component;
    expect(component).toBeTruthy();

    const button = screen.getByRole("button");
    expect(screen.getByRole("button")).toHaveTextContent("Test toggle");
    await user.click(screen.getByRole("button"));
    rerender(<Toggle>Test toggle</Toggle>);

    expect(screen.getByRole("button")).toHaveTextContent("Cancel");
  });
});

Error

Storybook preview hooks can only be called inside decorators and story functions.

      31 | const ToggleTemplate: ComponentStory<typeof Button> = (args: ButtonProps) => {
      32 |   // useArgs allow for programatic changes to args (controls)
    > 33 |   const [_, updateArgs] = useArgs();
         |                           ^
      34 |
      35 |   const toggleFunc = () =>
      36 |     updateArgs({

[kgrupp]

In my case it was something inside of the storybook-addon-pseudo-states add-on which was causing my stories to fail. Removing it did the trick for me:

- addons: ["@storybook/addon-docs", "storybook-addon-pseudo-states"],
+ addons: ["@storybook/addon-docs"],

Adding storybook-addon-pseudo-states introduced the issue in my case.

invalidHooksError@http://localhost:9001/vendors~main.iframe.bundle.js:99401:10
useStoryContext@http://localhost:9001/vendors~main.iframe.bundle.js:99603:11
useParameter@http://localhost:9001/vendors~main.iframe.bundle.js:99611:26
withPseudoState@http://localhost:9001/vendors~main.iframe.bundle.js:267187:44
hookify/<@http://localhost:9001/vendors~main.iframe.bundle.js:99347:21
decorateStory/<@http://localhost:9001/vendors~main.iframe.bundle.js:101254:12

I solved the broken stories by wrapping them into a separate component and just using the component without additional hooks.

export const _default = () => <Default />;
const Default = () => {
  const [open, setOpen] = useState(false);
  const handleClose = (actionValue: string, args?: any[]) => {
    setOpen(false);
  };
  return (
    <MyDialog open={open} onApply={handleClose}>
  );
};

Not the best workaround, but I did not have many stories like that.