Экспортированный простой компонент все еще ожидает сохранения во время теста

Question

Я экспортирую свой компонент Navbar следующим образом:

export const Navbar = ({ user }) => (
  <nav className={styles.navbarContainer}>
    <img src={Logo} alt={text.logoAlt} />
    <NavLink to={feedPath} className={styles.link} activeClassName={styles.activeLink}>
      {text.feedPathText}
    </NavLink>
    <NavLink to={viewingsPath} className={styles.link} activeClassName={styles.activeLink}>
      {text.viewingsPathText}
    </NavLink>
    <span className={styles.navItem}>
      <img className={styles.mapIcon} src={mapIcon} alt={text.mapAlt} />
      {text.defaultTheater}
    </span>
    <span className={styles.navItem}>
      <img className={styles.avatar} src={user.profilePictureUrl} alt={text.avatarAlt} />
      {`${user.firstName} ${user.lastName}`}
    </span>
  </nav>
);

const mapStateToProps = state => ({
  user: state.currentUser.user
});

Navbar.propTypes = {
  user: PropTypes.shape({
    profilePictureUrl: PropTypes.string,
    firstName: PropTypes.string,
    lastName: PropTypes.string
  })
};

export default connect(
  mapStateToProps,
  null
)(Navbar);

Когда я ввожу его для тестирования защищенного маршрута:

import React from 'react';
import { mount } from 'enzyme';
import { BrowserRouter } from 'react-router-dom';
import { ProtectedRoute } from '../index';
import { Navbar } from '../../../Navbar';

describe('Auth Component', () => {
  const user = {
    firstName: 'First',
    lastName: 'Last',
    profilePictureUrl: 'avatar.jpeg'
  };
  const props = {
    component: () => <div id="component" />,
    path: ''
  };

  const mountRoute = isAuth =>
    mount(
      <BrowserRouter>
        <Navbar user={user} />
        <ProtectedRoute isAuth={isAuth} {...props} />
      </BrowserRouter>
    );

  it('renders the component if isAuth is true', () => {
    const wrapper = mountRoute(true);
    expect(wrapper.find('#component').exists()).toBe(true);
  });
});

Это дает мне ошибку, что он ожидает подключения магазина к компоненту.

Не удалось найти «store» в контексте «Connect (Navbar)»

Не совсем уверен, почему это происходит. Я правильно импортирую простой компонент?

Answer 1

Используйте shallow рендеринг вместо mount, если вы хотите протестировать свой компонент без какого-либо контекста, связанного с подключенными компонентами или каких-либо побочных эффектов.С mount каждый дочерний компонент визуализируется, поэтому если у вас есть вложенный компонент, который опирается на какой-либо контекст, этот тест не пройдёт, если вы не смоделируете этот контекст в своем тесте.

const mountRoute = isAuth =>
    shallow(
      <BrowserRouter>
        <Navbar user={user} />
        <ProtectedRoute isAuth={isAuth} {...props} />
      </BrowserRouter>
    );

Еще одна вещь, которую вы должны рассмотреть, этоимпорт подключенного компонента по умолчанию вместо класса, потому что именно так вы используете его в производстве, как объясняли основные разработчики Enzyme в этом потоке