reactjs - 如何在故事书中注入(inject)窗口变量？

Question

我想将一个 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 创建的。这就是为什么我需要在 addDecorator 函数中提供一个 store 。

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

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

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

如何在故事书中注入(inject)或模拟此类全局数据？

Answer 1

我可以在 __stories__ 目录中添加一个 preview-head.html 文件。

里面有像这样的javascript:

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

Documentation