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

不幸的是，在configureStore函数中，约化器之一具有全局数据window.GLOBAL的依赖性。

在故事书中，我将看到以下错误：

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

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

Answer 1

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

里面有这样的javascript：

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

Documentation

Answer 2

您要访问的window是iframe预览。尝试从iframe外的故事书window访问窗口。

window.parent.window.GLOBAL

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

2 个答案: