Настройка тестирования с круговыми ссылками в магазине 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

Ваш вопрос очень неясен. Что именно вы хотите проверить об этих магазинах в модульных тестах? Вы не можете реально проверить сами данные.

Мои предложения:

ссылка на магазины

вместо использования одного свойства, просто сохраните весь магазин:

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.

Держите ваши реагирующие компоненты чистыми

Реакция компонентов, которые вы действительно хотите провести модульное тестирование. убедитесь, что они не используют хранилища mobx напрямую, но вместо этого вы используете функцию inject(), чтобы создать второй класс: 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/>
}