reactjs - 错误:未捕获 [不变违规:对象作为 React 子对象无效
问题描述
为组件编写渲染测试并且无法解决此错误:
Error: Uncaught [Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, displayName, muiName}). If you meant to render a collection of children, use an array instead...
我知道这一定很简单,但我正在疏远。这是我的测试文件的样子:
import React from 'react';
import { render } from '@testing-library/react';
import DashboardCard from '../index';
const CardWithProps = () => (
<DashboardCard title="title">
<div>child</div>
</DashboardCard>
);
describe('<DashboardCard />', () => {
it('Expect to not log errors in console', () => {
const spy = jest.spyOn(global.console, 'error');
render(<CardWithProps />);
expect(spy).not.toHaveBeenCalled();
});
});
仪表板卡:
import React from 'react';
import T from 'prop-types';
import { CardContainer, StyledSpan } from './styledComponents';
const DashboardCard = ({ children, title }) => (
<CardContainer>
<StyledSpan>{title}</StyledSpan>
{children}
</CardContainer>
);
DashboardCard.propTypes = { children: T.node.isRequired, title: T.string.isRequired };
export default DashboardCard;
卡片容器:
import styled from 'styled-components';
export const CardContainer = styled.article`
background-color: white;
padding: 2rem 4rem 1rem;
`;
解决方案
推荐阅读
- c# - 如何将 DataGridView 的颜色值传递给 ListBox?
- reactjs - 如何在反应原生平面列表中访问数组中的嵌套对象
- r - 以组内匹配的行元素为条件进行变异
- elasticsearch - 所有特定属性的 Elasticsearch 动态模板
- python - 对受 CloudFlare 保护的 API 的 Python 请求返回 403
- python - 我正在尝试交换列表中的两个元素,但是在第一次交换之后,它会不断被交换,因为它符合要交换的条件
- java - 如何使用@WebMvcTest 连接千分尺
- jquery - 使用带有ajax jquery的codeignter上传多个文件
- matplotlib - 如何在 Matplotlib 中获得固定高度(以像素为单位)、固定数据 x/y 纵横比并自动移除移除水平空白边距?
- jquery - 使用 jQuery 时获取 rails 对象 id 的问题