単体テストに問題がある複数の店舗を持つMobXオブザーバコンポーネントを注入した

Question

MobX注入デコレータで私が理解していることは、Enzymeを使用して単体テストでストアを初期化してからコンポーネントIマウントしています。 [src：https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jestと統合テストセクションにスクロールします。]しかし、私はStore Not Availableを入手し続けています！エラー。これは、特に私が複数の店を注入している場合に問題になる傾向があります。だから私のコンポーネントで

：

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

私のテストは、次のようになります。

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',() => {...}); 

ここに他の種類のプロバイダが必要なのですか、それとも明らかに何かが欠けていますか？

Answer 1

あなたの設定が正しいことが分かります。再現可能なセットアップがありますか？あなたもwrappedComponentを使用することにより、直接、元の部品を実装できることに注意してくださいあなたのMyComponentでthis issue

Answer 2

でも例を参照してください。あなたのTestCaseで

export const undecorated = MyComponent 

：

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

export default、下記の別の行を追加します。 import {undecorated as MyComponent} from './MyComponent'

あなたの店舗については、initia純粋な単体テストを行っているときにサンプルストアオブジェクトを作成するときにlizeを使用します。上記の例では

：あなたは、ユニットテストしている場合

create const errorStore={}. 

そしてもう一つは、shallow代わりのmountを使用しています。