Unit test case when Mobx + RootStore + useContext hook

Question

When mobx store is used from useContext() hook what will be best approach to write unit test case? Should we use enzyme or react testing library? Here Provider or @inject() is not used

Store design:

//StoreA
export class StoreA {
  rootStore: RootStore;
  constructor(rootStore: RootStore) {
    this.rootStore = rootStore;
  }
  //StoreA implementations...
}

 //StoreB
export class StoreB {
  rootStore: RootStore;
  constructor(rootStore: RootStore) {
    this.rootStore = rootStore;
  }
  //StoreB implementations...
}

//RootStore
export class RootStore {
  StoreA: StoreA;
  StoreB: StoreB;
  constructor() {
    this.storeA = new storeA(this);
    this.storeB = new storeB(this);
  }
}

export const RootStoreContext = createContext(new RootStore());

In component store is used from useContext hook

const SomeComponent = ({}) => {
  const rootStore = useContext(RootStoreContext);
  const { storeAdata, storeAmethods } = rootStore.storeA;
  //Component code....
}

Stackblitz Link: https://stackblitz.com/edit/react-ts-qec5vu?file=Hello.tsx

In below scenario,

How to write Unit test case only for individual stores (its having circular dependency)
If react testing library used, how to mock stores and useContext?
Is it possible to use enzyme?
Which lib's are suitable for writing UTC?

score 0 · Answer 1 · answered Sep 07 '20 at 08:01

If you are just unit testing the stores, don't use components. Instantiate the stores directly and test them.

If you are testing component interaction (integration) then I would suggest you use the react testing library. Create the context provider and wrap you components with the provider for each test.

more info: https://testing-library.com/docs/example-react-context

Unit test case when Mobx + RootStore + useContext hook

1 Answers1