33

SampleComponent別の「接続されたコンポーネント」(つまり ) をマウントするコンポーネントがありますcontainer。ingでテストしようとSampleComponentすると ( が必要なため)、次のエラーが表示されます。mountcomponentDidMount

不変違反: 「Connect(ContainerComponent)」のコンテキストまたは小道具のいずれかで「store」が見つかりませんでした。ルート コンポーネントを でラップするか、明示的に「store」を prop として「Connect(ContainerComponent)」に渡します。

これをテストする最良の方法は何ですか？

4

6 に答える 6

43

Enzyme のマウントは、オプションのパラメーターを取ります。必要なものに必要な2つは

options.context: (Object [optional]): Context to be passed into the component

options.childContextTypes: (Object [optional]): Merged contextTypes for all children of the wrapper SampleComponent次のようなオプション オブジェクトで マウントします。

const store = { 
  subscribe: () => {},
  dispatch: () => {},
  getState: () => ({ ... whatever state you need to pass in ... })
}
const options = {
  context: { store }, 
  childContextTypes: { store: React.PropTypes.object.isRequired } 
}

const _wrapper = mount(<SampleComponent {...defaultProps} />, options)

これで、SampleComponent は、提供したコンテキストを に渡しますconnected component。

于 2016-09-28T13:43:12.410 に答える
11

私が本質的に行ったことは、reduxストア (およびProvider) を取り込み、次のようにユーティリティ コンポーネントにラップすることでした。

export const CustomProvider = ({ children }) => {
  return (
    <Provider store={store}>
      {children}
    </Provider>
  );
};

次に、それmountに対してSampleComponentテストを実行します。

it('contains <ChildComponent/> Component', () => {
  const wrapper = mount(
    <CustomProvider>
      <SampleComponent {...defaultProps} />
    </CustomProvider>
  );
  expect(wrapper.find(ChildComponent)).to.have.length(1);
});
于 2016-06-14T19:20:07.373 に答える
4

redux-mock-storeを使用するオプションもあります。

Redux 非同期アクション クリエーターとミドルウェアをテストするためのモック ストア。モック ストアは、テストのアクション ログとして機能するディスパッチされたアクションの配列を作成します。

モック ストアは、Redux に必要なストア オブジェクトで必要なメソッドを提供します。オプションのミドルウェアとアプリ固有の初期状態を指定できます。

import configureStore from 'redux-mock-store'

const middlewares = []
const mockStore = configureStore(middlewares)

const initialState = {}
const store = mockStore(initialState)

const wrapper = mount(<SampleComponent store={store}/>)
于 2018-10-17T08:45:03.647 に答える
0

デコレータ構文の使用をよりテストしやすくするために、私はこれを作成しました: https://www.npmjs.com/package/babel-plugin-undecorate

入力：

@anyOldClassDecorator
export class AnyOldClass {
  @anyOldMethodDecorator
  method() {
    console.log('hello');   
  }
}

出力：

@anyOldClassDecorator
export class AnyOldClass {
  @anyOldMethodDecorator
  method() {
    console.log('hello');   
  }
}

export class __undecorated__AnyOldClass {
  method() {
    console.log('hello');   
  }
}

うまくいけば、これは堅実なオプション 3を提供できます!

于 2018-06-25T04:24:46.310 に答える