Тестирование наблюдателя реакции mobx с помощью React usecontext - React, Mobx

Question

Новое в тестировании mobx с помощью React. Я тестирую простую боковую панель навигации, открывается / закрывается в гамбургер-меню. Я создал магазин для панели навигации:

export class Store {

    toggle = false;

    setToggle(bool){
        this.toggle = bool;
    };
};

decorate(Store, {
    toggle: observable,
    setToggle: action
});

export default createContext(new Store());

А вот компонент панели навигации:

export default observer(() => {
    const store = useContext(Store); //SideNavStore is imported from mobx store folder

    const handleOnClick = () => {
        store.setToggle(false);
    }

    return(
        <div data-testid="test">
            <Drawer open={store.toggle} onClose={handleOnClick}>
                <div role="presentation">
                    <List>
                        {routes.map(route => {

                            return   <>
                                        <ListItem button onClick={handleOnClick}>
                                            <ListItemText primary={route.name}/>
                                        </ListItem>
                                    </>

                        })}
                    </List>
                </div>
            </Drawer>
        </div>
    );
});

Это приложение. js

export default () => {

    return (
      <div className="App">


        <Navbar ></Navbar>

      </div >
    )
  }

Тест. js

describe('Navbar Interaction', () => {

    describe('Inpsecting Navbar Contents', () => {

        beforeEach(cleanup);

        class Store {
            sideNavToggle = true;
        }

        const DecoratedStore = decorate(Store,{
            sideNavToggle: observable
        });

        const renderWithStore = (store) => {
            render(
                    <Navbar />
            );
        }

        it('Expect links are present', () => {
            const store = new DecoratedStore();
            const { getByText } = renderWithStore(store);
            expect(getByText("My Dashboard")).toBeTruthy();
        });

    });
})

Мой тест здесь не проходит, потому что он не может найти текст в документе, Drawer Open установлен на false, настроенный store.toggle. Пытаясь выяснить, как внедрить магазин или фиктивный магазин в тесте, есть несколько руководств по использованию Provider / Inject, но для этого требуется mobx-react, и я считаю, что они устарели; Я бы хотел использовать mobx-react-lite. В renderWithStore застрял на том, как пройти фиктивный магазин в тесте. Я мог бы передать магазин как props, но я считаю, что для этого требуется provider/inject, чего я не хочу делать в случае необходимости. Я предпочитаю импортировать магазин прямо в компонент Navbar, используя React.useContext. Я не вижу тестов с использованием React.useContext и Mobx Observer в Интернете. Кто-нибудь сталкивался с подобным сценарием или вы можете предложить лучший подход? Также как лучше всего использовать магазины React и Mobx? Использование React-testing-library для моих тестов. Ваша помощь очень ценится!

Answer 1

mobx-react-lite советует пользователям предпочесть React.useContext поставщику / инъекциям.

Обратите внимание на https://mobx-react.js.org/recipes-context

const storeContext = React.createContext<TStore | null>(null)

export const StoreProvider = ({ children }) => {
  const store = useLocalStore(createStore)
  return <storeContext.Provider value={store}>{children}</storeContext.Provider>
}

Что касается тестирования , если вы хотите, чтобы компонент использовал настраиваемое хранилище или фиктивное хранилище, вы можете сделать это, передав хранилище в StoreProvider. Вот так пользователи Redux тестируют свои компоненты.

export const StoreProvider = ({ store, children }) => {
  return <storeContext.Provider value={store}>{children}</storeContext.Provider>
}