Reactjs jest装载错误：不变冲突，渲染未返回任何内容

我有一个带有一些路由设置的react应用程序，它呈现不同的有状态组件（类组件）。我最近添加了一个新的路由，该路由呈现到无状态组件（功能组件）。类组件和新的功能组件都使用特定的子组件（该子组件是功能组件）。应用程序工作正常，但当为呈现新功能组件的路由添加新的单元测试时，我的其他现有测试开始失败，出现以下错误：

错误：未捕获[不变冲突：HealthCheck（…）：无 从呈现返回。这通常意味着返回语句是 缺少。或者，若不提供任何内容，请返回null。]

这是最近添加的功能组件的代码：

import React, { Fragment } from 'react';

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


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


export default HealthCheck;

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;

import React，{Fragment}来自'React'；
从“../../blocks/StatusBar”导入状态栏；
常量HealthCheck=（）=>（）；
导出默认健康检查；

如果我删除状态栏的用法，测试通过就可以了。以下是我的一项测试（每条路线的测试都相同）：

test（'应该为仪表板呈现路由'，（）=>{
props={……props，statusBarProps:{statusBarProps:true}；
//它看起来好像是在山上坠毁
包裹=安装(
您的状态栏组件是什么样子的？状态栏代码在哪里？Ben和@hongdevelop请查看更新后的问题，状态栏复制有困难。您可能希望尝试从头开始重建并评估一个“构建块”一次看一看有什么变化，有什么效果。谢谢Ben！是的，这很奇怪，当我用一个简单的hello world替换它时，效果很好。。。
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;