用remote usecontext测试mobx反应观察器-React，Mobx

Question

使用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设置为false配置的store.toggle。为了弄清楚如何在测试中注入存储或虚拟存储，有一些关于使用提供者/注入的教程，但是要求使用mobx-react，我认为它们已被弃用。我想坚持使用mobx-react-lite。在renderWithStore中，我坚持如何在测试中通过虚拟存储。我可以将商店作为props通过，但我认为这需要provider/inject，如果有必要，我不想这样做。我宁愿使用React.useContext将商店直接导入到Navbar组件中。我在网络上看不到使用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>
}