Mobx / Storybook: необходимо настроить Storybook для работы с Mobx-State-Tree - PullRequest
Новая
       12

Mobx / Storybook: необходимо настроить Storybook для работы с Mobx-State-Tree

0 голосов
/ 07 ноября 2019

Я получаю ошибку Cannot read property 'data' of undefined для более чем 80% своих компонентов, когда пытаюсь просмотреть их в StoryBook.

Я думаю, мне нужно либо смоделировать данные в истории, либо передать в нее соответствующие магазины, но я не уверен. Я обратился к каналу Storybook Discord , и кто-то предложил обернуть их в <Provider>, но я не знаю, как осуществить это в Storybook.

Я создал базовыйсхема моего компонента и соответствующего файла истории ниже. Буду очень признателен за любую помощь или предложения!

Component

import React, { Fragment, useEffect } from 'react'
import { observer } from 'mobx-react-lite'
import { RootStoreModel } from '../../stores/root-store'
import useInject from '../../hooks/useInject'

const mapStore = ({ componentSummary, customer }: RootStoreModel) => ({
    item1: parent.data.item1,
    item2: parent.data.item2
    item3:  parent.data.item3
})

type Props = {
    idx: number;
    title: string;
    toggleActive: (idx: number, newState: false) => void;
}

const MyComponent = (props: Props): JSX.Element => {
    const {
    item1,
    item2,
    item3
    } = useInject(mapStore)

    const { idx, title, toggleActive } = props

    return (
        <div>Content</div>
        )
}

export default observer(MyComponent)

Story file for component

import React from 'react';
import { storiesOf } from '@storybook/react';
import MyComponent from './myComponent';

const options = ['done', 'error', 'pending'];

storiesOf('My Component', module)
    .add(
        'Default', () =>
            <MyComponent idx={0} title="ComponentNumeroUno" toggleActive={() => null}/>,
    );
...