如何在故事书中注入窗口变量?

IT技术 reactjs redux storybook
2021-05-11 10:02:39

我想将 React 组件(称为ApplicationForm)添加到storybook

故事书是这样写的:

import { configureStore } from '../store';

const store = configureStore();

storiesOf('application from', module)
  .addDecorator(story => <Provider store={store}>{story()} </Provider>)
  .add('all', () => (
      <ApplicationForm />
  ));

ApplicationForm与reduxForm创建。这就是为什么我需要storeaddDecorator函数中提供 a

不幸的是,在configureStore函数中,其中一个 reducer 依赖于全局数据window.GLOBAL

在故事书中,我会看到以下错误:

GLOBAL is not defined
ReferenceError: GLOBAL is not defined
    at initGlobalState (http://localhost:9010/static/preview.bundle.js:86625:3)

如何在故事书中注入或模拟此类全局数据?

2个回答

我可以preview-head.html__stories__目录中添加一个文件

在里面我有这样的javascript:

<script>
  var data = { };
  window.GLOBAL = {
    data: data
  };  
 </script>

文档

window你试图访问的iframe预览。尝试从 iframe 外部访问窗口, Storybook window

window.parent.window.GLOBAL