Тестирование аутентифицированного маршрута с использованием Jest / Enzyme - PullRequest
Новая
       32

Тестирование аутентифицированного маршрута с использованием Jest / Enzyme

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

У меня есть компонент, который отображается только при аутентификации маршрута.

Способ проверки подлинности настраивается при использовании реакции-маршрутизатора v4 в качестве HOC:

Root.js 

import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import reducers from './App/reducerIndex';

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);

export default ({children, initialState={}})=>{
    return(
        <Provider store={createStoreWithMiddleware(reducers, initialState)}>
            {children}
        </Provider>
    );
}

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import reducers from './App/reducerIndex';
import { AUTH_USER } from './App/actionTypes';

import App from './App/app';
import '../style/css/custom.scss';

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

import Root from './root';
ReactDOM.render(
    <Root>
        <App id={token}/>
    </Root>,
    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);

В настоящее время так настроен тест панели инструментов

тест панели приборов: 

import React from 'react';
import { mount } from 'enzyme';
import Root from '../../../root';
import Header from './header';
import '../../../setupTests';
import Dashboard from './dashboard';

let wrapped;

beforeEach(() => {
    const initialState = {
        auth: true
    };
    wrapped = mount(
        <Root initialState={initialState}>
            <Dashboard />
        </Root>
    );
});


describe('Dashboard', () => {
    console.log("The component is", wrapped)
    // make our assertion and what we expect to happen
    it('header component exists', () => {
        expect(wrapped.contains(<Header />)).toBe(true)
    });
    it('renders without crashing', () => {
        expect(component.contains(<Header />)).toBe(true)

      });

});

Console.log постоянно сообщает мне, что компонент не определен. Должен ли я обернуть это вокруг реагирующего маршрутизатора? Я в тупике.

...