тестовая опора, которая получает номер с помощью библиотеки тестирования / реакции-нативной

Question

Я попытался прочитать документацию в testing-library/react-native, и я искал в stackru, но не нашел хорошего результата.

У меня есть этот компонент

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} />);

Answer 1

У меня была та же проблема, и я решил ее, установив testID для своего элемента, а затем используя.propsполучить доступ. Для вас это будет что-то вроде:

      return (
  <CardContainer
    {/*Add testID to the component you wanna get the prop from*/}
    testID="container-test-id"
    padding={padding}
    style={expand !== true ? { display: 'flex', flexShrink: 0.5, flexGrow: 0.5 } : null}
  >
    {/*...*/}
  </CardContainer>
);

Затем на вашем тесте вы получите его сgetByTestId

      it('renders with the specified padding', () => {
  const { getByTestId } = render(<ClickableCard padding={10} />);

  expect(getByTestId('container-test-id').props.padding).toBe(10)
});

Надеюсь, поможет.

Answer 2

Ссылка: react-native-testing-io

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 это покажет вам, действительно ли отступы применяются в стилях компонента.

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()
})