CODEWITHSUNDEEP
unit-testingreactjsenzymemobx
RacheleM
RacheleM

Reputation: 46

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

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?

Upvotes: 3

Views: 2966

Answers (2)

Kamaraju
Kamaraju

Reputation: 2625

In your MyComponent:

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

add another line below export default:

export const  undecorated = MyComponent

In your testCase import {undecorated as MyComponent} from './MyComponent'

and regarding your stores you need not initialize when you are doing pure unit testing create sample store objects .

In the above example:

create const errorStore={}.

And one more thing use shallow instead of mount if you are unit testing.

Upvotes: 0

mweststrate
mweststrate

Reputation: 4978

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

Upvotes: 2

Related Questions