Question

所以我想用酶/笑话测试mapStateToProps和mapDispatchToProps。

我有一个像这样的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 ...所以我不知道如何使用连接的组件来测试mapStatesToProps和redux-mock-store。

我也不知道如何测试mapDispatchToProps ..！我已经尝试过此blog中提供的方法，但是它不起作用。

非常感谢！

编辑：这行得通，但是我不确定它是否真正测试 mapStateToProps ...有人可以确认这是测试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);
  });

Answer 1

您也可以尝试以下方法：

在我看来，测试mapStateToProps（）时，您需要标识特定状态的道具。还使用了提供程序，该提供程序使包装在Connect()函数中的组件可用。

import React from 'react';
import { shallow } from 'enzyme';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import ConnectedDrawerAvatar from './DrawerAvatar';

describe('DrawerAvatar', ()=> {
  let component;
  let store;
  let value;

 beforeEach(() => {
    const initialState = {
        authReducer: { isAuthenticated: value }
    };
    store = mockStore(initialState);
    component = shallow(<Provider store={store}><ConnectedDrawerAvatar/></Provider>);
  });

 it('should return exact value from the store(props)', () => {
     expect(component.props().isAuthenticated).toBe(value);
  });


});

希望这会有所帮助！

Answer 2

我从redux discussion on github中找到的一种方法是

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)
})
})

Answer 3

直接测试该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，您不应测试连接的组件。只需导出容器类并直接对其进行测试。

之所以不应该测试组件连接，是因为它在库本身中经过了很好的测试，因此通过测试您并没有真正增加任何价值。

React Redux：使用Enzyme / Jest测试mapStateToProps和mapDispatchToProps

3 个答案: