Question

我有一个带有一些路由设置的react应用，该应用呈现了不同的有状态组件（类组件）。我最近添加了一条新路由，该路由可呈现给无状态组件（功能组件）。类组件和新功能组件都使用特定的子组件（此子组件是功能组件）。 App运行正常，但是在为呈现新功能组件的路由添加新的单元测试时，我的其他现有测试开始失败，并显示以下错误：

错误：未被捕获[不变违反：HealthCheck（…）：没有从渲染返回。这通常意味着return语句是失踪。或者，不渲染任何内容，请返回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;

开玩笑的安装错误：始终不变，渲染未返回任何内容

0 个答案: