В моем новом приложении 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')`,
); */
});
});