19

在我的新 React Native 应用程序中，我想添加一些 Jest 测试。

一个组件呈现背景图像，该图像直接位于assets文件夹中的项目中。

现在我偶然发现了如何测试该图像是否实际上是从该路径获取的，因此存在于组件中并正确渲染。

我尝试将toHaveStylefrom@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')`,
); */

  });
});
4

4 回答 4

25

如果你使用@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 测试库似乎不包含getByAltText. （谢谢你，@P.Lorand！）

于 2020-12-31T20:18:00.433 回答
5

很难说，因为我们看不到<ImageBackground>组件或它的作用……但如果它像<img>组件一样工作，我们可以做这样的事情。

通过其角色 / alt text / data-testid 在图像组件上使用选择器：

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

然后在该组件上查找属性：

expect(getByDataTestId('background')).toHaveAttribute('src', '../../../../assets/images/image.jpg')
于 2020-05-19T19:19:00.680 回答
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

于 2021-02-17T09:08:14.223 回答
1

我今天遇到了这个问题，发现如果你的 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();
于 2021-05-10T13:41:30.213 回答