reactjs - 使用 react usecontext 测试 mobx react observer - React, Mobx

Question

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

export class Store {

    toggle = false;

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

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

export default createContext(new Store());

这是 Navbar 组件:

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

测试.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 。试图找出如何在测试中注入(inject)商店或虚拟商店，有一些关于使用 Provider/Inject 的教程，但这需要 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 而不是 provider/inject。

看看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>
}