使用 MobX 存储循环引用设置测试

Question

我正在尝试用 Jest 测试我的 MobX 商店。

我正在使用 Mobx、React 和 Jest。

class ConfigStore {
    constructor(RootStore) {
        this.rootStore = RootStore;
        this.config = {};
    }
}
class DataStore {
    constructor(RootStore) {
        this.config = RootStore.config;
    }
}
class UIStore {
    constructor(RootStore) {
        this.config = RootStore.config;
        this.data = RootStore.data;
    }
}
class RootStore {
    constructor() {
        this.config = new ConfigStore(this);
        this.ui = new UIStore(this);
        this.data = new DataStore(this);
    }
}

我的店铺设置是否正确？

如果是这样，在将商店传递给提供商之前测试商店的最佳方法是什么？

Answer 1

你的问题很不清楚。您究竟想在单元测试中测试这些商店的哪些内容？您无法真正测试数据本身。

我的建议：

link 到商店

与其使用设置单个属性，不如保留整个商店：

class DataStore {
    constructor(RootStore) {
        this.configStore = RootStore;
    }
}

通过这种方式，您可以确保属性始终得到正确更新和观察。

如果您愿意，您可以随时在较低级别的商店中购买属性：

class DataStore {
    constructor(RootStore) {
        this.configStore = RootStore;
    }
    get config() {
       return this.configStore.config;
    }
}

摘要

如果你使用打字稿抽象你的商店与界面，那么商店更容易测试：

class DataStore {
    constructor(store: IConfigStore) {
        this.configStore = store;
    }
}
interface IConfigStore {
     config: Config;
}

使用存储库模式

为每个商店创建一个可注入的存储库，以便商店完成的所有 api 调用实际上都在此存储库中完成：

class RootStore {
    constructor(repository) {
        this.repostiory = repository;
        this.config = new ConfigStore(this);
        this.ui = new UIStore(this);
        this.data = new DataStore(this);
        this.initializeData();
    }
    async initializeData(){
         this.config = await this.repository.getConfig();
    }
}

通过这种方式，您可以轻松地模拟存储库以提供静态日期，因此您不需要进行任何 api 调用。

保持你的 React 组件纯净

您真正想要进行单元测试的 React 组件。确保他们不直接使用 mobx 商店，而是使用 inject() 函数来制作第二个 class：https://github.com/mobxjs/mobx-react#inject-as-function

这样你的组件就更容易独立测试和使用：

const PureReactComponent = ({ name }) => <h1>{name}</h1>

const SimpleMobxComponent = inject(stores => ({
    name: stores.userStore.name
}))(PureReactComponent)

// usage:
render() {
  return <SimpleMobxComponent/>
}

使用 MobX 存储循环引用设置测试

Setup testing with MobX store circular references

javascript

unit-testing

reactjs

jestjs

mobx

link 到商店

摘要

使用存储库模式

保持你的 React 组件纯净