Jest+React原生测试库：如何测试图像源代码？

kuarbcqp 于 2022-12-16 发布在 Jest

关注(0)|答案(5)|浏览(168)

在我的新React Native应用程序中，我想添加一些Jest测试。
一个组件渲染背景图像，该图像直接位于项目的assets文件夹中。
现在，我遇到了如何测试这个图像是否确实是从这个路径获取的，因此是否存在于组件中，以及是否正确呈现。
我尝试使用@testing-library/jest-native中的toHaveStyle和一个容器，返回错误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')`,
); */

  });
});

jestjs

来源：https://stackoverflow.com/questions/60509527/jestreact-native-testing-library-how-to-test-an-image-src

5条答案

按热度按时间

vqlkdk9b1#

如果您使用的是@testing-library/react而不是@testing-library/react-native，并且图像上有alt属性，则可以避免使用getByDataTestId，而使用getByAltText。

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

    const image = getByAltText('the_alt_text');

    expect(image.src).toContain('the_url');
    // or
    expect(image).toHaveAttribute('src', 'the_url')
});

文件。
不幸的是，看起来React Native Testing Library does not include getByAltText.（谢谢你，@P.罗兰！）

赞(0）回复(0）举报 2022-12-16

dbf7pr2w2#

这有点难说，因为我们看不到<ImageBackground>组件或它的功能...但如果它像<img>组件一样工作，我们可以做类似这样的事情。
通过图像组件的role / alt text / data-testid使用图像组件上的选择器：

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

然后查找该组件的属性：

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

赞(0）回复(0）举报 2022-12-16

moiiocjp3#

当我使用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

赞(0）回复(0）举报 2022-12-16

rt4zxlrg4#

我今天遇到了这个问题，发现如果您的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();

赞(0）回复(0）举报 2022-12-16

khbbv19g5#

我认为您正在寻找：

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

赞(0）回复(0）举报 2022-12-16

我来回答

Jest+React原生测试库：如何测试图像源代码？

5条答案

测试

相关问题

热门标签

最新问答