Здравствуйте! Есть компонент , подключенный через 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);
});
});
Или, может, знаете статью, где про похожий случай можно прочитать? Заранее спасибо!