1

Здравствуйте! Есть компонент , подключенный через connect() к Redux-хранилищу. Он имеет такой вид (упрощённый):

export class App extends Component {
  render() {
    const { isAuthenticated } = this.props;
    return (
      <div>
        { isAuthenticated && <TopNavigation /> }
        <Route path='/' component={HomePage} />
      </div>
    );
  }
}
export default connect(mapStateToProps)(App);

Скажите пожалуйста, как протестировать строку:

{ isAuthenticated && <TopNavigation /> }

Ниже привожу пример теста, но первый describe не проходит, а во втором я не знаю, как протестировать содержимое компонента.

import React from 'react';
import { shallow } from 'enzyme';
import configureStore from 'redux-mock-store';
import ConnactedApp, { App } from './App';

const mockStore = configureStore();

const location = {
  pathname: '/',
};

describe('stupid App component', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<App location={location} isAuthenticated={true} />);
  })

  // Вот здесь возникает ошибка!!!!!
  it('should render TopNavigation', () => {
    expect(wrapper.find('TopNavigation').length).toBe(1);
  })
});

describe('App component with redux store', () => {
  const initialState = {
    user: {
      email: '[email protected]',
    }
  };

  let wrapper, store;

  beforeEach(() => {
    store = mockStore(initialState);
    wrapper = shallow(
      <ConnactedApp store={store} location={location} />
    );
  });

  it('is rendered normally', () => {
    expect(wrapper.find(App).length).toBe(1);
  });

  it('should get location prop', () => {
    expect(wrapper.prop('location')).toEqual(location);
  });

  it('should get isAuthenticated prop', () => {
    expect(wrapper.prop('isAuthenticated')).toEqual(true);
  });
});

Или, может, знаете статью, где про похожий случай можно прочитать? Заранее спасибо!

1 ответ 1

0

Вроде бы я разобрался с проблемой.

Вместо функции shallow нужно использовать функцию mount из того же модуля enzyme.

Просто я думал, что может быть есть способ протестировать указанную в вопросе строку без полного рендеринга компонента, но видимо так сделать нельзя.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.