Как написать тест на HOC в шутку и фермент - PullRequest
Новая
       27

Как написать тест на HOC в шутку и фермент

0 голосов
/ 22 марта 2019

В настоящее время наше приложение использует реагирующий маршрутизатор и HOC для создания аутентификации или системы. Мне было удобно писать тесты для компонентов, у которых нет дополнительного уровня аутентификации, но я был озадачен тем, как справиться с этим кодом, который я написал. Я искал документацию конкретно об аутентификации на маршрутизаторе и застрял. Каков наилучший подход для обработки HOC, которые находятся внутри реагирующего маршрутизатора?

index.js 

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);
const token = localStorage.getItem('token');
if (token) {
  store.dispatch({ type: AUTH_USER });
}

ReactDOM.render(
  <Provider store={store}>
    <App id={token} />
  </Provider>,
  document.querySelector('.app')
);

App.js 

function PrivateRoute({ component: Component, auth, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        auth ? (<div><Component {...props} /></div>) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      }
    />
  );
}

function PublicRoute({ component: Component, auth, ...rest }) {
  return <Route {...rest} render={props => (!auth ? <Component {...props} /> : <Redirect to="/dashboard" />)} />;
}

class App extends Component {
  static contextTypes = {
    router: PropTypes.object,
  };

  render() {
    return (
      <Router history={history} >
        <Switch>
          <PublicRoute auth={this.props.auth} path="/login" exact component={Login} />
          <PrivateRoute auth={this.props.auth} path="/dashboard" exact component={Dashboard} />
        </Switch>
      </Router>
    );
  }
}

function mapStateToProps(state) {
  return {
    auth: state.auth.authenticated,
  };
}

export default connect(
  mapStateToProps,
  null
)(App);
...