使用 react usecontext 测试 mobx 反应观察者 - React, Mobx答案

【问题标题】：Testing mobx react observer with react usecontext - React, Mobx使用 react usecontext 测试 mobx 反应观察者 - React, Mobx
【发布时间】：2020-08-24 21:09:45
【问题描述】：

使用 React 测试 mobx 的新手。我正在测试一个简单的侧面导航栏，在汉堡菜单上打开/关闭。我已经为导航栏设置了一个商店：

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>
    );
});

这是 App.js

export default () => {

    return (
      <div className="App">


        <Navbar ></Navbar>

      </div >
    )
  }

Test.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设置为store.toggle配置的false。试图弄清楚如何在测试中注入存储或虚拟存储，有一些关于使用 Provider/Inject 的教程，但需要mobx-react，我相信它们已被弃用；我想坚持mobx-react-lite。在renderWithStore，我被困在如何通过测试中的虚拟商店。我可以将商店作为props 传递，但我相信这需要provider/inject，如果有必要我不想这样做。我宁愿使用React.useContext 直接在导航栏组件中导入商店。我没有在网络上看到使用 React.useContext 和 Mobx Observer 的测试。有没有人遇到过这种情况，或者你能提供更好的方法吗？另外，使用 React 和 Mobx 商店的最佳做法是什么？使用React-testing-library 进行我的测试。感谢您的帮助！

【问题讨论】：

标签： reactjs react-hooks mobx react-testing-library mobx-react-lite

【解决方案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>
}

【讨论】：