web-dev-qa-db-ja.com

React Redux：Enzyme / Jestを使用したmapStateToPropsおよびmapDispatchToPropsのテスト

ですから、mapStateToPropsとmapDispatchToPropsをEnzyme/Jestでテストしたいと思います。

次のようなコンポーネントDrawerAvatarがあります。

DrawerAvatar.js

_const mapStateToProps = state => ({
  isAuthenticated: state.authReducer.isAuthenticated
});

export default compose(
  connect(mapStateToProps, null)
)(DrawerAvatar);
_

DrawerAvatar.test.js

_import configureMockStore from 'redux-mock-store';
import connectedDrawerAvatar, { DrawerAvatar } from './DrawerAvatar';

const mockStore = configureMockStore();

it('mapStateToProps should return the right value', () => {
  const initialState = {
    someState: 123
  };
  const store = mockStore(initialState);
  const wrapper = shallow(<connectedDrawerAvatar store={store} />);
  expect(wrapper.props().someState).toBe(123);
});
_

ただし、wrapper.props().someStateはundefinedを返すため、これは機能しません。接続コンポーネントを使用してredux-mock-storeとともにmapStatesToPropsをテストする方法がわかりません。

MapDispatchToPropsをテストする方法もわかりません。私はこれで提供するメソッドを試しました blog が機能しません。

どうもありがとうございました ！

[〜＃〜] edit [〜＃〜]：これは動作しますが、動作するかどうかはわかりません本当にtestmapStateToProps ...これがmapStateToPropsをテストする正しい方法であることを誰かが確認できますか？ DrawerAvatar.test.js

_  it('mapStateToProps should return the right value', () => {
    const initialState = {
      isAuthenticated: false
    };
    const mockStore = configureMockStore();
    const store = mockStore(initialState);

    const wrapper = shallow(<connectedDrawerAvatar store={store} />);
    expect(wrapper.props().store.getState().isAuthenticated).toBe(false);
  });
_
reactjsreduxreact-reduxjestjsenzyme
5
filipyoo

私が見つけた1つの方法： githubでのreduxの議論 は

import React from 'react';
import { shallow } from 'enzyme';
import configureMockStore from 'redux-mock-store';

import ConnectedDrawerAvatar from './DrawerAvatar';
describe('DrawerAvatar', ()=> {
const mockStore = configureMockStore();

it.each([true, false], 'receives correct value from store as props', (value)=> {
    const initialState = { authReducer: { isAuthenticated: value } }
    const store = mockStore(initialState)

    const wrapper = shallow(<ConnectedDrawerAvatar store={store} />)
    expect(wrapper.props().isAuthenticated).toBe(value)
})
})
2
RAJ

これをテストする最も簡単な方法は、次のようにmapStateToPropsを直接テストすることです。

export const mapStateToProps = state => ({
  isAuthenticated: state.authReducer.isAuthenticated
});

次のようなテストがあります：

it('mapStateToProps should return the right value', () => {
  const mockedState = {
    authReducer: {
      isAuthenticated: false
    }
  };
  const state = mapStateToProps(mockedState);
  expect(state).toBeFalsy();
});

しかし、なぜそうすべきなのか本当にわかりません。

IMO接続コンポーネントをテストしないでください。コンテナークラスをエクスポートして直接テストするだけです。

コンポーネント接続をテストしてはならない理由は、ライブラリ自体で十分にテストされているため、実際には値を追加しないことをテストすることです。

0
Moyote