Question

为组件编写渲染测试，但无法解决此错误：

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;

CardContainer：

import styled from 'styled-components';

export const CardContainer = styled.article`
  background-color: white;
  padding: 2rem 4rem 1rem;
`;

错误：未被捕获[永久违反：对象作为React子元素无效

0 个答案: