随着 React 越来越受欢迎，前端测试变得越来越重要。在测试 React 组件时，一种常见的需求就是测试组件中包含的图片是否正确显示。
本文将详细介绍如何在 Enzyme 测试中测试 React 组件中的图片，并提供示例代码和指导意义。
Enzyme 简介
Enzyme 是一个流行的 React 测试工具，它提供了不同层次的 API，使得测试更加方便和灵活。
Enzyme 的 API 有三种：
shallow()： 浅渲染组件，只渲染一个组件，不渲染其子组件。mount()：全渲染组件，进行完整渲染和子组件渲染。render()： 类似于mount()，但是返回的是 React 组件的 HTML 代码，而非组件实例。
本文将以 shallow() API 为例，介绍如何在 Enzyme 中测试 React 组件中的图片。
如何测试图片
React 组件中的图片通常是通过 img 标签来实现，Enzyme 也提供了查找 img 标签的方法。在测试 React 组件中的图片时，有两个要点需要注意：
- 查找
img标签的同时，需要检查它的src属性是否正确。 - 对于通过 CSS 的
background-image引入的图片，需要额外的处理。
下面将分别介绍这两个要点。
1. 检查 src 属性
从 Enzyme 中的 shallow() 获取的 React 组件实例通常是一个 ShallowWrapper 对象，它提供了 find() 和 findWhere() 方法，可以通过选择器查找组件中的元素。
下面是一个示例代码，假设我们有一个 Image 组件，它包含了一个 img 标签：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- - -- --- -- -- -
-----
---- --------- --
------
--
------ ------- ------我们可以通过 Enzyme 的 find() 方法找到 img 标签，并检查它的 src 属性：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----- ---- ----------
----------------- -- -- -
---------- ------ --- ------- ------- -- -- -
----- ------- - -------------- -------------- ----
------------------------------------------------------------
---
---在上面的示例中，我们通过 shallow() 方法将 Image 组件浅渲染，然后使用 find() 方法查找 img 标签，最后使用 prop() 方法获取 src 属性。最终的断言是 expect(wrapper.find('img').prop('src')).toEqual('logo.png')。
2. 处理 background-image
有时我们有一些通过 CSS 的 background-image 引入的图片，例如：
import React from 'react';
const Image = ({ src }) => (
<div className="image" style={{ backgroundImage: `url(${src})` }} />
);
export default Image;在这种情况下，我们不能直接通过查找 img 标签来测试图片是否正确，而需要通过 style 属性来查看背景图片的 URL。同样，我们需要在测试时检查 src 属性。
下面是测试代码的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----- ---- ----------
----------------- -- -- -
---------- ------ --- ------- ---------- ------- -- -- -
----- ------- - -------------- -------------- ----
-----------------------------------------------------------------------
---
---------- ---- --- ------- --- ----------- -- -- -
----- ------- - -------------- -------------- ----
------------------------------------------------
---
---在上面的示例中，我们先使用 shallow() 方法来浅渲染 Image 组件，然后分别使用 prop() 方法查找 style 属性和 src 属性，并进行断言。
总结
在测试 React 组件中的图片时，我们需要注意两个要点：检查 img 标签的 src 属性是否正确，以及对通过 CSS 引入的背景图片进行额外处理。
本文详细介绍了如何通过 Enzyme 在 React 组件中测试图片，提供了详细的示例代码，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c2719983d39b4881670883