Я пытался прочитать документацию по адресу testing-library / реагировать-нативный , и я искал в стеке, но я не нашел хорошего результата.
У меня есть этот компонент
import React from 'react';
import { CardContainer, Title, Icon, Item, ClickableItem, StyledRow, StyledRowImage } from './style';
interface Props {
title?: string;
imageURL?: any;
onPress?: () => {};
children?: JSX.Element;
iconWidth?: number;
iconHeight?: number;
padding?: number;
withouIcon?: boolean;
setBorder?: {};
fontSize?: number;
margin?: number;
withoutIcon?: boolean;
}
const ClickableCard: React.FC<Props> = ({
title,
imageURL,
onPress,
children,
iconWidth,
iconHeight,
padding,
setBorder,
fontSize,
setMargin,
withoutIcon,
expand = false,
}) => {
return (
<CardContainer
padding={padding}
style={expand !== true ? { display: 'flex', flexShrink: 0.5, flexGrow: 0.5 } : null}
>
{children || (
<ClickableItem onPress={onPress} setBorder={setBorder} setMargin={setMargin}>
<>
{!withoutIcon && (
<StyledRowImage>
{imageURL && <Icon source={imageURL} iconWidth={iconWidth} iconHeight={iconHeight} />}
</StyledRowImage>
)}
<StyledRow>
<Title fontSize={fontSize}>{title}</Title>
</StyledRow>
</>
</ClickableItem>
)}
</CardContainer>
);
, и мне нужно проверить первые реквизиты padding
, которые получают номер. Я тоже попробовал getByText, но, очевидно, он не работает.
Я пытался
import React from 'react';
import { fireEvent, render, wait } from '@testing-library/react-native';
import ClickableCard from '@components/ClickableCard';
describe('ClickableCard component', () => {
it('renders correctly', () => {
render(<ClickableCard />);
});
it('renders with the specified padding', () => {
const { queryBy } = render(<ClickableCard padding={10} />);
const padding = queryBy(10);
expect(padding).toBeDefined();
expect(padding.children.length).toBe(10);
expect(padding.children[0]).toBe('ClickableCard');
});
});
Я спрашивал себя, существует ли это своего рода getByNumber или что-то в этом роде.
Вопрос:
как мне правильно проверить const { queryBy } = render(<ClickableCard padding={10} />);