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

Posted 2023-02-19

【中文标题】如何在故事书中注入窗口变量？

【英文标题】：How to inject a window variable in a storybook?

【发布时间】：2018-11-30 18:56:57

【问题描述】：

我想将 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)

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

【参考方案1】：

您尝试访问的window 是iframe 预览。 尝试从 iframe 外部访问窗口，Storybook window。

window.parent.window.GLOBAL

【参考方案2】：

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

里面有这样的javascript：

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

Documentation

【讨论】：

您需要将此文件放在.storybook ***（config）目录中，并且在更改后重新启动故事书的服务器很重要！

如果我只想将它用于特定故事而不是所有故事，这将如何工作？

可能在.addWithJSX方法内