MobX Store循环引用的测试搭建及代码正确性与测试方法咨询

一、Store代码是否正确？ #

嘿，你的Store代码完全没问题！这种RootStore + 子Store的嵌套结构是MobX里非常经典且合理的实现方式：

• RootStore作为顶层容器，在构造函数里初始化所有子Store，同时把自身传入子Store的构造函数，这样子Store就能轻松访问其他关联的Store
• 子Store通过接收RootStore实例来建立依赖，比如UIStore能直接拿到config和data，这种方式让Store之间的依赖关系清晰明了，完全符合MobX的最佳实践

你的代码结构本身没有逻辑问题，可以放心使用。

二、传入Provider前的最佳测试方式 #

在把Store传入Provider给React组件使用前，建议从「单元测试」到「集成测试」分层进行验证，具体方式如下：

1. 先测试RootStore的初始化逻辑 #

直接创建RootStore实例，验证所有子Store是否被正确初始化，并且子Store之间的引用是否正确：

test("RootStore initializes all sub-stores correctly", () => {
  const rootStore = new RootStore();
  
  // 验证子Store实例类型
  expect(rootStore.config).toBeInstanceOf(ConfigStore);
  expect(rootStore.ui).toBeInstanceOf(UIStore);
  expect(rootStore.data).toBeInstanceOf(DataStore);
  
  // 验证子Store的跨引用是否正确
  expect(rootStore.ui.config).toBe(rootStore.config);
  expect(rootStore.data.config).toBe(rootStore.config);
  expect(rootStore.ui.data).toBe(rootStore.data);
});

2. 单独测试每个子Store的独立逻辑 #

如果子Store有自己的状态操作方法（比如ConfigStore里的配置更新方法），可以单独创建子Store实例，手动传入模拟的RootStore来隔离测试：

// 假设ConfigStore新增了setConfig方法
test("ConfigStore can update its config state", () => {
  // 创建一个极简的模拟RootStore，满足子Store的依赖需求即可
  const mockRootStore = {};
  const configStore = new ConfigStore(mockRootStore);
  
  configStore.setConfig({ theme: "dark", language: "en" });
  expect(configStore.config).toEqual({ theme: "dark", language: "en" });
});

这种方式能精准测试单个Store的逻辑，不受其他Store的影响。

3. 测试Store之间的交互逻辑 #

当多个Store存在联动行为时，创建真实的RootStore实例，测试它们的交互是否符合预期：

// 假设DataStore会根据ConfigStore的apiUrl配置请求数据
test("DataStore uses apiUrl from ConfigStore when loading data", () => {
  // 模拟fetch方法
  global.fetch = jest.fn().mockResolvedValue({
    json: jest.fn().mockResolvedValue([])
  });
  
  const rootStore = new RootStore();
  rootStore.config.setConfig({ apiUrl: "https://test.api/v1" });
  
  // 调用DataStore的加载方法
  rootStore.data.loadData();
  
  // 验证fetch是否使用了正确的url
  expect(fetch).toHaveBeenCalledWith("https://test.api/v1/data");
});

这里可以用Jest的jest.mock或全局模拟来处理外部依赖，确保测试的独立性。

4. 可选：结合React组件的集成测试 #

如果要提前验证组件和Store的联动效果，可以用Provider包裹组件，传入测试用的RootStore：

import { render, screen } from "@testing-library/react";
import { Provider } from "mobx-react";
import UserProfile from "./UserProfile";

test("UserProfile displays user data from DataStore", () => {
  const rootStore = new RootStore();
  // 给DataStore设置测试数据
  rootStore.data.setUser({ name: "Mike", age: 30 });
  
  render(
    <Provider rootStore={rootStore}>
      <UserProfile />
    </Provider>
  );
  
  expect(screen.getByText("Mike")).toBeInTheDocument();
  expect(screen.getByText("30")).toBeInTheDocument();
});

内容的提问来源于stack exchange，提问作者Mike Martin