Reactjs 测试Redux酶：成分不'；状态更改后无法重新渲染

我有一个连接的组件（到Redux store），名为DrawerAvatar，我将其导出用于测试目的（酵素+Jest），包括连接版本和非连接版本

基本上，我想测试当我的Redux状态

isAuthenticated

为

true

时，我的DrawerAvatar是否呈现用户化身，当

isAuthenticated

为

false

时，它是否呈现徽标图片

DrawerAvatar.js

export class DrawerAvatar extends React.Component {
  render () {
    const avatarSrc = this.props.isAuthenticated ?
      'http://user-avatar.png'
    ) : (
      'http://logo.png'
    );

    return (
      <StyledAvatarContainer>
        <StyledAvatar src={avatarSrc} />
      </StyledAvatarContainer>
    );
  }
}

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

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

const initialState = {
  isAuthenticated: false
};

export default function authReducer (state = initialState, action) {
  switch (action.type) {
    case 'LOGIN_WITH_EMAIL_REQUESTED_TEST':
      return {
        ...state,
        isAuthenticated: true,
      };
    default:
      return state;
  }
}

这是我的建议：

authReducer.js

export class DrawerAvatar extends React.Component {
  render () {
    const avatarSrc = this.props.isAuthenticated ?
      'http://user-avatar.png'
    ) : (
      'http://logo.png'
    );

    return (
      <StyledAvatarContainer>
        <StyledAvatar src={avatarSrc} />
      </StyledAvatarContainer>
    );
  }
}

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

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

const initialState = {
  isAuthenticated: false
};

export default function authReducer (state = initialState, action) {
  switch (action.type) {
    case 'LOGIN_WITH_EMAIL_REQUESTED_TEST':
      return {
        ...state,
        isAuthenticated: true,
      };
    default:
      return state;
  }
}

所以基本上，我有一个真正的动作，类型是

LOGIN\u with\u EMAIL\u request

，它将调用Axios的一堆Redux传奇，但出于测试目的，我刚刚在我的real authReducer中添加了一个

LOGIN\u WITH\u EMAIL\u REQUESTED\u TEST

案例，它会将状态

isAuthenticated

设置为

true

，以避免Axios调用等…但不确定这是否是一个好方法..lol

我试图用

wrapper.update（）

强制组件更新，但徒劳

我也看过redux mock store，但似乎无法修改状态，只能处理操作，而不能处理状态

我刚开始写我的第一个反应测试，所以…谢谢

基本上，我想测试当我的Redux状态isAuthenticated为true时，我的DrawerAvatar渲染用户头像，当isAuthenticated为false时，它渲染徽标图片

我建议不要连接整个已连接的组件，而尝试使用Redux。您可以通过以下方式实现预期结果：

describe('Header > DrawerAvatar: component', () => {
  it('should render logo for the DrawerAvatar if not authenticated, and the user avatar if authenticated', () => {
    let wrapper = shallow(<DrawerAvatar isAuthenticated={false} />);
    let StyledAvatarSrc = wrapper.find('StyledAvatar').prop('src');
    expect(StyledAvatarSrc).toBe('https://logo.png');
    wrapper = shallow(<DrawerAvatar isAuthenticated={true} />);
    StyledAvatarSrc = wrapper.find('StyledAvatar').prop('src');
    expect(StyledAvatarSrc).toBe('https://user-avatar.png');
  });
});

description（'Header>DrawerAvatar:component'，（）=>{
它（'如果未通过身份验证，则应呈现抽屉抽屉的徽标，如果通过身份验证，则呈现用户化身'，（）=>{
让包装器=浅（）；
让StyledAvatarSrc=wrapper.find（'StyledAvatar'）.prop（'src'）；
expect（StyledAvatarSrc）.toBe（'https://logo.png');
包装器=浅（）；
StyledAvatarSrc=wrapper.find（'StyledAvatar'）.prop（'src'）；
expect（StyledAvatarSrc）.toBe（'https://user-avatar.png');
});
});

---

然后，您可以为涉及的每个部分编写单独的测试，例如

mapstatetops

函数，它实际上只是一个基于输入返回对象的简单函数。另一个简单的测试是

authReducer

，等等

我相信您需要在测试中调用

store.dispatch

后立即调用

wrapper.update（）

。这行吗？是的，但不幸的是，它不起作用。你还需要在呼叫调度后拿出你想要的道具，然后更新。例如，在wrapper.update之后，添加一行，如

constyledavatarsrcurunath=wrapper.dive（）.find（'StyledAvatar'）.prop（'src'）

然后

expect（styledavatarsrucunath）

etcy你就是那个男人！！我只是想了想（因为状态变成了道具！！），并且完全按照你描述的方式实现，并且准备更新我的问题，但是你更快了：D！所以，不知何故，我在正确的方向上是令人放心的，哈哈，非常感谢！！太棒了，很高兴听到它起作用了。另一种方法也应该起作用，但它违背了单元测试的理念，并且更倾向于集成测试。如果你是一个新开玩笑的人，在可能的情况下一定要学习

toMatchSnapshot

。祝你好运