问题
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