web-dev-qa-db-ja.com

酵素.mount（）。setPropsをreact-reduxプロバイダーで使用する

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

私は経由でレンダリングしています

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

次に、以下を使用していくつかの変更を観察しようとしています。

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

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

reactjstestingreduxreact-redux
14
GTF

setPropsを使用したアプローチは次のとおりです

import { Provider } from 'react-redux';


const renderComponent = properties => mount(
  React.createElement(
    props => (
      <Provider store={store}>
        <IntlProvider locale="en" defaultLocale="en" messages={messages}>
      <Router>
        <MyComponent {...props} />
      </Router>

      </Provider>
    ),
    properties))

それからあなたのテストで

it('should set some props', () => {
   const renderedComponent = renderComponent(props);
   renderedComponent.setProps({ /* some props */ } });

  expect(true).toBe(true);
})
6
soupette

コンポーネントをプロバイダーでラップした後、同じ問題が発生しました。私がしたことは、コンポーネント自体の代わりに子にsetPropsを使用したことです。

これは、テストスイートのコンポーネントの例です。

 let component, connectedComponent; 
 component = () => {
 store = configureMockStore()(myStore);  
 connectedComponent = mount(
     <Provider >
       <MyComponent store={store} params={{xyz: 123}} />
     </Provider>);};

しかし、テスト自体では、私はこれを行いました：

connectedComponent.setProps({children: <MyComponent params={{}} />});
0
Mina Djuric

ラップされたコンポーネントまたは親に対してのみ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)
})

もう1つのヒントは、浅い部分とマウントの違いを理解するのに役立つため、テストで子の依存関係を不必要にモックする必要がないことです。ここでの一番の答えは良い読み物です。

Enzymeでレンダーとシャローを使用する必要があるのはいつですか/ Reactテスト？

0
lfender6445