Storybook 覆盖导入方法

发布于 2025-01-10 18:12:12 字数 801 浏览 0 评论 0原文

我的组件“ReportWrapper”如下所示，它导入“getReportData”，而“getReportData”又返回异步数据。

import { getReportData } from "../dataFecther";

export const ReportWrapper = ({ query }) => { 
  const { data, loading, error } = getReportData({ type: "1", query });
  return (
    <ReportTable
      reportData={data}
      error={error}
    />
  );

它获取数据的方式可能不适合编写 Storybook 故事。有没有办法将“getReportData”的导入覆盖为故事中的模拟导入之类的内容。

示例故事

export default {
  title: "Storybook",
  component: ReportWrapper,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
}; 
const Template = ({ args }) => {
  return (
      <ReportWrapper {...args} />
  );
};

export const First = Template.bind({}); 
First.args = {
  storyName: "First One",
};

原文

My component 'ReportWrapper' is something like below where it import 'getReportData' which in turn return data async.

import { getReportData } from "../dataFecther";

export const ReportWrapper = ({ query }) => { 
  const { data, loading, error } = getReportData({ type: "1", query });
  return (
    <ReportTable
      reportData={data}
      error={error}
    />
  );

The way it fetch data may not be suitable for writing Storybook stories.
Is there a way to override this import of 'getReportData' to something like a mock import in stories.

Sample story

export default {
  title: "Storybook",
  component: ReportWrapper,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
}; 
const Template = ({ args }) => {
  return (
      <ReportWrapper {...args} />
  );
};

export const First = Template.bind({}); 
First.args = {
  storyName: "First One",
};

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无声静候 2025-01-17 18:12:12

如果我理解正确的话，您想在故事中使用不同的 getReportData 。我将其视为嘲笑故事中的模块。

我设法使用 Storybook 的 webpackFinal 配置来做到这一点并添加一个 webpack 插件 - webpack 的 NormalModuleReplacementPlugin。
基本上，您可以使用这种方法替换故事中的模块。

你可以在你的故事书配置中尝试这个：

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(
        /some\/path\/to\/dataFetcher\.js/,
        path.join(__dirname, 'mockedDataFetcher.js')
      )
    );
  }
}

If I understand correctly you want to use a different getReportData in stories. I read this as mocking a module in stories.

I managed to do this using Storybook's webpackFinal config and to add a webpack plugin - webpack's NormalModuleReplacementPlugin.
Basically you can replace a module in stories using this approach.

You could try this in your storybook config:

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(
        /some\/path\/to\/dataFetcher\.js/,
        path.join(__dirname, 'mockedDataFetcher.js')
      )
    );
  }
}

回复收藏 0 原文

掩耳倾听 2025-01-17 18:12:12

如果我理解正确的话，您想在组件内部运行一个方法，该方法来自另一个组件。

第一个组件想要从外部获取方法

const FirstComponent = ({getReportData}) => {
  const [data,setData]=useState();
  useEffect(()=>{
    const fetchData=async()=>{
      if(getReportData){
        let response = getReportData();
        if(response.status === 200)
          setData(response.data)
      }
    }
    fetchData();
  })
  return (
    <div>
      {data}
    </div>
  );
};

，第二个组件想要使用第一个组件


const SecondComponent = () => {
  const axiosTest=async()=> {
    let response = await axios.get("ajax/api/..")
    setData(response.data)
}
  return (
    <FirstComponent getReportData={axiosTest} />
  );
};

If I understand correctly, you want to run a method inside of a component which that method comes from another component.

the first component that wants to take the method from outside

const FirstComponent = ({getReportData}) => {
  const [data,setData]=useState();
  useEffect(()=>{
    const fetchData=async()=>{
      if(getReportData){
        let response = getReportData();
        if(response.status === 200)
          setData(response.data)
      }
    }
    fetchData();
  })
  return (
    <div>
      {data}
    </div>
  );
};

and the second component that to use the first component


const SecondComponent = () => {
  const axiosTest=async()=> {
    let response = await axios.get("ajax/api/..")
    setData(response.data)
}
  return (
    <FirstComponent getReportData={axiosTest} />
  );
};

回复收藏 0 原文

~没有更多了~