How to inject a window variable in a storybook?

南笙酒味 提交于 2020-05-14 17:50:04

问题


I want to add a React component (called ApplicationForm) to a storybook.

The story book is written this way:

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

const store = configureStore();

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

The ApplicationForm is created with reduxForm. That's why I need to provide a store in the addDecorator function.

Unfortunately in the configureStore function, one of the reducer has a dependency of a global data window.GLOBAL.

In the storybook I will see the following error:

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

How can I inject or simulate such global data in the storybook?


回答1:


I can add a preview-head.html file in the __stories__ directory.

Inside which I have javascript like this:

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

Documentation




回答2:


The window you're trying to access is the iframe preview. Try to access the window from outside the iframe, the Storybook window.

window.parent.window.GLOBAL



来源:https://stackoverflow.com/questions/50968590/how-to-inject-a-window-variable-in-a-storybook

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!