Question

所以我根据RestrictedRoute中的Route并使用react-router (v4)中的branch方法创建了recompose组件：

import React from 'react';
import { connect } from 'react-redux';
import { compose, branch, renderComponent } from 'recompose';
import { Route, Redirect } from 'react-router-dom';

const RestrictedRoute = (props) => {
  const { component, ...otherProps } = props;
  return <Route {...otherProps} component={component} />;
};

const mapStateToProps = state => ({
  authenticated: state.authentication.session,
});
const branched = branch(
  ({ authenticated }) => !authenticated,
  renderComponent(() => <Redirect to="/" />),
);

const enhanced = compose(
  connect(mapStateToProps),
  branched,
)(RestrictedRoute);

export default enhanced;

它工作得很好，但现在我需要编写一些测试，告诉我重定向是否正常工作，所以我这样做了：

import React from 'react';
import { shallow } from 'enzyme';
import { Provider } from 'react-redux';
import { Redirect, MemoryRouter } from 'react-router-dom';
import configureStore from 'redux-mock-store';
import RestrictedRoute from '../RestrictedRoute';
import { initialAuthenticationState } from 'Reducers/authentication';

describe('<RestrictedRoute />', () => {
  const mockStore = configureStore();
  let store;
  let container;
  beforeEach(() => {
    store = mockStore({
      authentication: { ...initialAuthenticationState }, // authentication.session is false in the initialAuthenticationState
    });
    container = shallow(
      <MemoryRouter>
        <Provider store={store}>
          <RestrictedRoute />
        </Provider>,
      </MemoryRouter>
    );
  })
  test('redirects if not authenticated', () => {
    expect(container.find(Redirect).length).toBe(1);
  });
});

我得到以下结果，这不是我的预期：

● <RestrictedRoute /> › redirects if not authenticated

    expect(received).toBe(expected)

    Expected value to be (using ===):
      1
    Received:
      0

我错过了什么？

Answer 1

问题在于shallow。我不应该使用它，因为它不是它的目的。 mount是我正在寻找的功能。

酶 - 测试限制路线

1 个答案: