web-dev-qa-db-ja.com

React酵素を使用したコンポーネントWillReceivePropsのテスト

酵素を使用して、componentWillReceivePropsを含むライフサイクル関数をテストします。

何よりもまず、私のコンポーネントをラップする必要があります materialUi styles そしてreduxで接続する必要があります。そうしないと、FlatButtonを含むmaterial-uiコンポーネントを使用するため、レンダリング関数にバグが発生します。

const wrapper = mount(
      <MuiThemeProvider muiTheme={muiTheme}>
         <Provider store={store}>
            <MemoryRouter>
               <MyComponent />
            </MemoryRouter>
         </Provider>
      </MuiThemeProvider>)

// absolutely fail
wrapper.find(MyComponent).setProps({ something })
expect(MyComponent.prototype.componentWillReceiveProps.calledOnce).toBe(true)

したがって、問題は、酵素が非ルートコンポーネントの適用を許可しないため、MyComponentにsetProps（）を使用できないことです。小道具を変更しても、componentWillReceivePropsやその他の必要なパーツをテストできません。

ComponentWillReceivePropsをテストできるように、MyComponentの小道具を設定/変更するにはどうすればよいですか？

unit-testingreactjsmaterial-uijestjsenzyme
7
Oscar

コンポーネントを個別にテストすることをお勧めします。問題は、material-uiがReact contextを使用して小道具を渡していることです。コンポーネントのコンテキストは次のように指定できます。

import React from 'react';
import { mount } from 'enzyme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const wrapper = mount(
  <MyComponent />,
  {
    context: {
      muiTheme: getMuiTheme(),
    },
    childContextTypes: {
      muiTheme: React.PropTypes.object.isRequired,
    }
  }
);

コンポーネントを分離する必要があるもう1つのことは、<Provider>を削除することです。接続されたコンポーネントをテストする代わりに、Redux docsで説明されている方法でコンポーネント自体をテストしてみてください： 接続されたコンポーネントのテスト

間もなく-コンポーネントと接続されたコンポーネントの両方をエクスポートしてから、小道具を渡してコンポーネントをテストします。エクスポートのあるコンポーネントの例：

import { connect } from 'react-redux'

// Use named export for unconnected component (for tests)
export class MyComponent extends Component { /* ... */ }

// Use default export for the connected component (for app)
export default connect(mapStateToProps)(MyComponent)

これで、装飾されていないコンポーネントを次のようにテストファイルにインポートできます。

import { MyComponent } from './MyComponent';

そして、最終テストは次のようになります。

import React from 'react';
import { mount } from 'enzyme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { MyComponent } from './MyComponent';

test('test component', () => {
  const wrapper = mount(
    <MyComponent />,
    {
      context: {
        muiTheme: getMuiTheme(),
      },
      childContextTypes: {
        muiTheme: React.PropTypes.object.isRequired,
      }
    }
  );

  // Test something
  const p = wrapper.find(...);
  expect(...).toEqual(...);

  // Change props
  wrapper.setProps({foo: 1});

  // test again
  expect(...).toEqual(...);
});
9
ischenkodv