![](/img/trans.png)
[英]How to test TextInput in react-native with @testing-library/reat-native?
[英]test prop that's receiving number with testing-library/react-native
我試圖閱讀 at testing-library/react-native的文檔,並在 stackoverflow 上進行了搜索,但沒有找到好的結果。
我有這個組件
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 但是,obv,它不起作用。
我嘗試過了
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} />);
it('renders with the specified padding', () => {
const { getByTestId } = render(<ClickableCard testID="card" padding={10} />)
const card = getByTestId('card')
expect(card.props.padding).toBe(10)
})
以上僅測試道具,因此如果您添加snapshot
,這將顯示填充是否實際應用於組件的 styles 中。
it('renders with the specified padding', () => {
const element = render(<ClickableCard testID="card" padding={10} />)
const card = element.getByTestId('card')
expect(card.props.padding).toBe(10)
expect(element.toJSON()).toMatchSnapshot()
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.