enzyme.mount（）を使用しています。setProps with react-redux Provider

Question

コンポーネントの変更を監視するための小道具を設定しています。唯一の問題は、レンダリングされた要素を<Provider>にラップしていることです。ツリーの下に接続されたコンポーネントがいくつかあるためです。

私は、次を使用して、いくつかの変化を観察しようとしている

const el =() => <MyComponent prop1={ prop1 } />; 
const wrapper = mount(<Provider store={store}>{ el() }</Provider>); 

を経由してレンダリングしています：

wrapper.setProps({ /* new props */ }); 
// expect()s etc. 

問題がsetProps()が上で適切に小道具を設定されていないということですラップされたコンポーネント。これはHoCではないので、<Provider>は実際には小道具を通過していないからだと思います。ローカルスコープの変数を変更して再レンダリングするよりも、これをテストする方が良いでしょうか？

Answer 1

ラップされたコンポーネントまたは親に対しては、setPropsに電話する必要があります。

あなたのテストは、単一の成分（親）を試験するだけなので、子どもに小道具をセットすることは酵素では許可されていません。

https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/setProps.md#setpropsnextprops--self

あなたは私たちが（プロバイダおよびコンテキスト経由）のための店の依存関係を満たす必要があることをさらに下の子コンポーネントを持っている場合、それは結構ですが、これらの子コンポーネントは、本当に自分自身の孤立のテストを持っている必要があります。

ここでは、変更のテストをsetPropsに書くことをおすすめします。

コンテナまたはコネクタのテストを記述している場合は、子コンポーネントが正しい小道具または状態を受信して​​いることを確認するだけです。たとえば：

：

import { createMockStore } from 'mocks' 
import { shallwo } from 'enzyme' 
// this component exports the redux connection 
import Container from '../container' 

const state = { foo: 'bar' } 

let wrapper 
let wrapped 
let store 

beforeEach(() => { 
    store = createMockStore(state) 
    wrapper = shallow(<Container store={store} />) 
    wrapped = wrapper.find('MyChildComponent') 
}) 

it('props.foo',() => { 
    const expected = 'bar' 
    const actual = wrapped.prop('foo') 
    expect(expected).toEqual(actual) 
}) 

もう一つの先端は、それはあなたが不テストの子供たちのための依存関係をからかっていない、ここでトップの答えは良い読み物である浅いとマウントの違いを理解するのに役立つということです今のところ

When should you use render and shallow in Enzyme/React tests?