Как тестировать компоненты в магазинах Mobx с помощью Jest

Question

Я пытаюсь протестировать свои компоненты React, используя магазины Mobx с Jest и React-testing-library.

Проблема в том, что у меня нет никаких подсказок о том, как вводить свои магазины для теста.

Вот мои упрощенные коды.

StaffInfo.js (компонент)

import React, { useState } from "react";
import { observer, inject } from "mobx-react";

const StaffInfo = props => {
   const store = props.instituteStore;
   const [staffs, setStaffs] = useState(store.staffs);

   return (
      <div>
         ....
      </div>
   );
}

export default inject(rootStore => ({
    instituteStore : rootStore.instituteStore
}))(observer(StaffInfo));

index.js (корневой каталог)

import LoginStore from "./LoginStore";
import InstituteStore from "./InstituteStore";

class RootStore {
    constructor(){
        this.loginStore = new LoginStore (this);
        this.instituteStore = new InstituteStore(this);
    }
}

export default RootStore;

InstituteStore.js (целевой магазин)

import { observable, action } from "mobx";

class InstituteStore {
    constructor(root){
        this.root = root;
    }

    @observable
    staffs = [];
}

export default InstituteStore;

StaffInfo.test.js (тестовый файл)

import React from "react";
import ReactDom from "react-dom";
import { MemoryRouter } from "react-router-dom";
import { Provider } from "mobx-react";

import StaffInfo from "./StaffInfo";
import InstituteStore from "../stores/InstituteStore";

describe("Staff Component testing", () => {
    test("should be rendered without crashing", () => {
        const div = document.createElement("div");
        ReactDOM.render(
            <MemoryRouter initialEntries={["/staff"]}>
                <StaffInfo instituteStore={RootStore.instituteStore} />
            </MemoryRouter>,
            div
        );
        ReactDOM.unmountComponentAtNode(div);
    });
});

Как только запускается этот тестовый файл, сообщения об ошибках выглядят так:

TypeError : Cannot read property 'staffs' of undefined

Пожалуйста, сообщите мнекакие части кодов неверны. Большое спасибо заранее!

Answer 1

Mobx-react Inject используется для вставки хранилищ в глубинный дочерний компонент. Эти звезды предоставлены контекстным API Provider.

, поэтому, где бы вы ни хранили хранилища для дочерних компонентов, используйте что-то вроде.

import rootStore from 'path_to_rootStore'
<Provider rootStore={rootStore}>
...
... 
 <App/>
...
...
<.Provider>