Having difficulty with unit testing MobX observer components with multiple stores injected

Question

My understanding with MobX inject decorator is that, with Enzyme, I should be able to simply initialize a store in my unit test and then pass as a prop to the component I'm mounting. [src: https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest and scroll to the Integration Tests section.] But I keep getting the Store not Available! error. This tends to be an issue particularly if I am injecting multiple stores.

So in my component:

export default inject('errorStore', 'someOtherStore', 'andTheThirdStore')(observer(MyComponent));

My test should look like this.

import errorStore from './stores/errorStore';
import someOtherStore from './stores/someOtherStore';
import andTheThirdStore from './stores/andTheThirdStore';
import Component from './components/Component';

describe('My Component', () => {
  someOtherStore.initializeWithData('./examples','TEST-123-45678-90', 'USERID');
  andTheThirdStore.initialize();
  const storeProp = { errorStore, someOtherStore, andTheThirdStore };

  beforeEach(() => {
      const wrapper = mount(<Component {...storeProp} />
  }

  it ('does all the things', () => {...});

Do I need some other sort of provider here or am I just missing something obvious?

Answer 1

As far as I can see your setup is correct. Do you have a reproducible setup? Note that you can also mount the original component directly by using wrappedComponent see also the example in this issue