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@email.com',
    }
  };

  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.

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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