Библиотека тестирования Jest+React Native: как проверить источник изображения?

Question

В моем новом приложении React Native я хочу добавить несколько тестов Jest.

Один компонент отображает фоновое изображение, которое находится непосредственно в проекте в assets папка.

Теперь я споткнулся о том, как проверить, действительно ли это изображение взято с этого пути, поэтому присутствует в компоненте и правильно отображается.

Я пробовал использовать toHaveStyle от @testing-library/jest-native с контейнером, который вернул ошибку toHaveStyleэто не функция. Затем я попробовал то же самое сqueryByTestId, та же ошибка. Когда я делаю expect(getByTestId('background').toBeInTheDocument); то я считаю, что это бесполезно, потому что он проверяет только наличие элемента с этим testId, но не источник изображения.

Пожалуйста, как я могу это проверить? Действительно ли имеет смысл тестировать источник изображения?

Вот мой код:

1.) Компонент, который необходимо протестировать (Background):

const Background: React.FC<Props> = () => {
  const image = require('../../../../assets/images/image.jpg');

  return (
    <View>
      <ImageBackground testID="background" source={image} style={styles.image}></ImageBackground>
    </View>
  );
};

2.) Тест:

import React from 'react';
import {render, container} from 'react-native-testing-library';
import {toHaveStyle} from '@testing-library/jest-native';
import '@testing-library/jest-native/extend-expect';
import Background from '../Background';

describe('Background', () => {   
  test('renders Background image', () => {
    const {getByTestId} = render(<Background></Background>);
    expect(getByTestId('background').toBeInTheDocument);

/*    const container = render(<Background background={background}></Background>);
expect(container).toHaveStyle(
  `background-image: url('../../../../assets/images/image.jpg')`,
); */

/*     expect(getByTestId('background')).toHaveStyle(
  `background-image: url('../../../../assets/images/image.jpg')`,
); */

  });
});

Answer 1

Если вы используете @testing-library/react скорее, чем @testing-library/react-native, и у вас есть alt атрибут на вашем изображении, вы можете избежать использования getByDataTestId и вместо этого используйте.

      it('uses correct src', async () => {
    const { getByAltText } = await render(<MyComponent />);

    const image = getByAltText('the_alt_text');

    expect(image.src).toContain('the_url');
});

Документация .

К сожалению, похоже, что библиотека React Native Testing Library не включает <tcode id="288493"></tcode>. (Спасибо, P.Lorand !)

Answer 2

Сложно сказать, потому что мы не видим <ImageBackground> компонент или что он делает... Но если он работает как <img> компонент мы можем сделать что-то вроде этого.

Используйте селектор на компоненте изображения через его роль / alt text / data-testid:

const { getByDataTestId } = render(<Background background={background}>
</Background>);

Затем найдите атрибут в этом компоненте:

expect(getByDataTestId('background')).toHaveAttribute('source', '../../../../assets/images/image.jpg')

Answer 3

Когда я использовал getByAltText и getByDataTestId я получил is not a function ошибка.

Итак, что сработало для меня:

      const imgSource = require('../../../../assets/images/image.jpg');
const { queryByTestId } = render(<MyComponent testID='icon' source={imgSource}/>);
expect(queryByTestId('icon').props.source).toBe(imgSource);

я использую @testing-library/react-native": "^7.1.0

Answer 4

Я думаю, что вы ищете:

      const uri = 'http://example.com';
const accessibilityLabel = 'Describe the image here';

const { getByA11yLabel } = render (
  <Image
    source={{ uri }}
    accessibilityLabel={accessibilityLabel}
  />
);

const imageEl = getByA11yLabel(accessibilityLabel);
expect(imageEl.props.src.uri).toBe(uri);

Answer 5

Сегодня я столкнулся с этой проблемой и обнаружил, что если ваш URI является URL-адресом, а не обязательным файлом, сшивание источника uri на testID работает хорошо.

      export const imageID = 'image_id';
...

<Image testID={`${imageID}_${props.uri}`} ... />

Контрольная работа

      import {
  imageID
}, from '.';

...


const testURI = 'https://picsum.photos/200';
const { getByTestId } = render(<Component uri={testURI} />);

expect(getByTestId()).toBeTruthy();