Написание теста рендеринга для компонента и не может разрешить эту ошибку:
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();
});
});
DashboardCard:
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;
`;