Ошибка при монтировании jest: нарушение инварианта, при рендеринге ничего не возвращено - PullRequest
Новая
       13

Ошибка при монтировании jest: нарушение инварианта, при рендеринге ничего не возвращено

0 голосов
/ 10 ноября 2019

У меня есть приложение реагирования с некоторыми настройками маршрутов, которые отображают различные компоненты с состоянием (компоненты класса). Недавно я добавил новый маршрут для компонента без состояния (функциональный компонент). И компоненты класса, и новый функциональный компонент используют определенный дочерний компонент (этот дочерний компонент является функциональным). Приложение работает нормально, но при добавлении нового модульного теста для маршрута, который отображает новый функциональный компонент, мои другие существующие тесты начали давать сбой со следующей ошибкой:

Ошибка: Uncaught [Invariant Violation: HealthCheck (…): Ничего не было возвращено из рендера. Обычно это означает, что отсутствует инструкция возврата. Или, чтобы ничего не отображать, верните null.]

Это код для недавно добавленного функционального компонента: 

import React, { Fragment } from 'react';

import StatusBar from '../../blocks/StatusBar’;


const HealthCheck = () => (<Fragment><StatusBar text=“Health Check“ /></Fragment>);


export default HealthCheck;

Если я уберу использование StatusBar, тестовый прогонпросто хорошо. Ниже приведен один из моих тестов (они одинаковы для каждого маршрута): 

test('should render a Route for Dashboard', () => {
  props = { ...props, statusBarProps: { statusBarProps: true };
  // it shows as if it were crashing at mount
  wrap = mount(
    <MemoryRouter initialEntries={['/dashboard'']} keyLength={0}>
      <Provider store={store}>
        <AppShell {...props} />
      </Provider>
    </MemoryRouter>,
  );
  // expect(wrap.find(Route).props().path).toEqual('/dashboard');
});

ОБНОВЛЕНИЕ

Компонент StatusBar: 

import PropTypes from 'prop-types';
import React from 'react';
import styled from 'styled-components';

import Text from '../elements/Text';

const ChildrenDiv = styled.div`
  align-items: center;
  display: flex;
  width: 100%;
`;

const ContentDiv = styled.div`
  display: flex;
  justify-content: space-between;

`;

const StyledDiv = styled.div`
  padding: 28px 56px;
  border-bottom: 1px solid gray;
  display: flex;
  padding: 28px 56px;
`;

const StatusBar = ({
  text,
  children,
}) => (
  <StyledDiv>
    <ContentDiv>
      <Text>{text}</Text>
      <ChildrenDiv>{children}</ChildrenDiv>
    </ContentDiv>
  </StyledDiv>
);

StatusBar.propTypes = {
  text: PropTypes.string,
  children: PropTypes.node,
};

StatusBar.defaultProps = {
  text: '',
  children: null,
};

export default StatusBar;
...