故事书覆盖导入方法

Question

我的组件 'ReportWrapper' 类似于下面它导入 'getReportData' 的地方 return 数据异步。

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

Answer 1

如果我理解正确的话，您想在故事中使用不同的 getReportData。我读这个是在嘲笑故事中的一个模块。

我设法使用 Storybook 的 webpackFinal config and to add a webpack plugin - webpack's NormalModuleReplacementPlugin 做到了这一点。基本上，您可以使用这种方法替换故事中的模块。

您可以在您的故事书配置中尝试这样做：

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

Answer 2

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

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

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} />
  );
};

故事书覆盖导入方法

Storybook override import method

reactjs

storybook