如何使用react测试呈现程序测试redux连接的HOC组件的存储状态更改？

我正在尝试测试以下组件，它基于几个React培训站点上非常常见的“ProtectedRoute”HOC/wrapper示例。基本概念是在

级别包装受保护的组件，以便重定向未经身份验证的用户

//Authenticated.js
import React from 'react';
import PropTypes from 'prop-types';
import { history } from 'store';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';  

export default function (Component) {  
  class Authenticated extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        authenticated: props.authenticated
      }
    }

    static getDerivedStateFromProps(props) {
      return {
        authenticated: props.authenticated                
      }
    }

    componentDidMount() {
      this._checkAndRedirect();
    }

    componentDidUpdate() {
      this._checkAndRedirect();
    }

    _checkAndRedirect() {
      const { authenticated, redirect } = this.props;

      if (!authenticated) {
        redirect();
      }
    }

    render() {
      return (
        <div>
          { this.props.authenticated ? <Component {...this.props} /> : null }
        </div>
      );
    }
  }

  const mapStoreStateToProps = (store) => {
    return {
      authenticated: store.auth.authenticated
    };
  };

  const mapDispatchToProps = dispatch => bindActionCreators({
    redirect: () => history.push('/')
  }, dispatch)

  Authenticated.propTypes = {
    authenticated: PropTypes.bool,
    redirect: PropTypes.func.isRequired
  }

  return connect(
    mapStoreStateToProps, 
    mapDispatchToProps
  )(Authenticated);
}

这两个测试都运行良好，并按预期通过，但我现在对测试以下真实场景感兴趣：

用户当前已登录，商店中的

authenticated=true

。一段时间后，他们的cookie过期了。对于我们的示例，假设我们定期检查服务器的身份验证状态，它会触发一些操作，导致存储的新状态导致

authenticated=false

除非我从来没有遇到过一个例子，否则我相当肯定

redux mock store

（尽管它的字面名称是“mock store”），在调用

store.dispatch（myAction（））

时，实际上并没有调用任何还原程序来返回新的“mock store”状态。我可以在

myAction.spec.js

中测试状态更改，但我仍然无法模拟HOC在

getDerivedStateFromProps

我可以告诉大家，我编写的测试涵盖了以下两种场景：组件以

authenticated=true/false

初始状态加载，并按预期工作，但当我查看覆盖率结果时，这些测试没有涵盖

getDerivedStateFromProps

函数

我如何编写一个测试来模拟存储状态下

身份验证

布尔值的变化，并断言

身份验证

组件在

getDerivedStateFromProps

（以前的

组件将接收Props

）中收到了变化，以确保我在测试中涵盖了这一点

//Authenticated.spec.js
import React from 'react';
import { Provider } from 'react-redux';
import { Router, Route } from 'react-router-dom';
import { createMemoryHistory } from "history";
import renderer from 'react-test-renderer';
import mockStore from 'tests/mockStore';

import Authenticated from 'components/common/Authenticated';
import Home from 'components/Home';


describe('Authenticated', () => {
  it('displays protected component if authenticated', () => {
    const AuthenticatedComponent = Authenticated(Home);
    const store = mockStore({ auth: { authenticated: true } });
    store.dispatch = jest.fn();
    const history = createMemoryHistory();
    history.push('/admin')
    const component = renderer.create(
      <Provider store={store}>
        <Router history={history} >
          <AuthenticatedComponent />
        </Router>
      </Provider>
    );
    expect(component.toJSON()).toMatchSnapshot();
    expect(history.location.pathname).toBe("/admin");
  });

  it('redirects to login if not authenticated', () => {
    const AuthenticatedComponent = Authenticated(Home);
    const store = mockStore({ auth: { authenticated: false } });
    store.dispatch = jest.fn();
    const history = createMemoryHistory();
    const component = renderer.create(
      <Provider store={store}>
        <Router history={history} >
          <AuthenticatedComponent />
        </Router>
      </Provider>
    );
    expect(component.toJSON()).toMatchSnapshot();
    expect(history.location.pathname).toBe("/");
  });
});