如何在故事书中注入窗口变量? [英] How to inject a window variable in a storybook?

问题描述

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

I want to add a React component (called ApplicationForm) to a 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 .

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

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

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?

推荐答案

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

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

里面我有这样的javascript:

Inside which I have javascript like this:

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

文档

这篇关于如何在故事书中注入窗口变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！