@storybook/addon-queryparams

如果您的组件需要特殊查询参数才能按照您想要的方式工作，则此 Storybook 插件会很有帮助。它允许您按故事模拟查询参数，以便您可以轻松重现组件的不同状态。

入门

首先，安装插件。

$ npx storybook@latest add @storybook/addon-queryparams

在您的故事中，通过 query 特殊参数定义您想要模拟的查询参数

import React from "react";
import { Button } from "../Button";

export default {
  component: Button,
  parameters: {
    query: {
      // example of mocking ?greeting="Hello world!"
      greeting: "Hello world!",
    },
  },
};

export const WithMockedSearch = {
  render: () => {
    const urlParams = new URLSearchParams(document.location.search);
    const mockedParam = urlParams.get("greeting");
    return <div>Mocked value: {mockedParam}</div>;
  }
}

致谢

虽然此插件曾是 Storybook monorepo 的一部分，但它收到了以下作者的贡献

Andrew Lisowski, Brody McKee, Clément DUNGLER, Filipp Riabchun, Gaëtan Maisse, Gert Hengeveld, Jon Palmer, Lynn Chyi, Michael Shilman, Norbert de Langen, Paul Rosania, Renovate Bot, Tom Coleman, Varun Vachhar, Yann Braga