ReactJS - testInstance.findAllByProps() 方法

testInstance.findAllByProps（） 方法用于查找具有某些属性的所有后代测试实例。简单来说，我们可以说它可以帮助我们找到并获取测试中与特定特征匹配的所有元素。

如果我们想更具体并找到具有特定属性的实例，我们可以使用 testInstance.findAllByProps（props）。这意味着我们正在搜索具有指定属性（属性或功能）的测试实例。此方法是一种工具，用于根据元素的属性在测试中查找和收集元素。它类似于测试组件的搜索功能。

语法

testInstance.findAllByProps(props)

参数

• props - 这是我们提供给函数的输入。它显示了我们希望在测试实例中找到的属性或特征。这些可以是我们正在寻找的特定属性或特征。

返回值

该函数将返回与特定属性匹配的测试实例的集合。它为我们提供了测试中具有我们正在搜索的特征的元素列表。

例子

示例 - 带有 Props 的基本组件

我们将创建一个简单的 React 组件及其相应的测试文件。此文件定义了一个名为 SimpleComponent 的基本 React 组件。它接受一个 prop 文本并将其呈现在 div 元素内。在测试文件中，编写一个测试用例，以确保 SimpleComponent 正确呈现提供的文本。它使用 findAllByProps 来查找具有特定属性的元素。所以这个应用程序的代码如下 -

SimpleComponent.js

import React from 'react';

const SimpleComponent = ({ text }) => {
	 	return <div>{text}</div>;
};

export default SimpleComponent;

SimpleComponent.test.js

	
import React from 'react';
import { create } from 'react-test-renderer';
import SimpleComponent from './SimpleComponent';

test('renders text correctly', () => {
	 	const component = create(<SimpleComponent text="Hello, World!" />);
	 	const instance = component.root;
	 	
	 	const elements = instance.findAllByProps({ text: 'Hello, World!' });
	 	
	 	expect(elements.length).toBe(1);
});

输出

示例 - 使用props列出组件

现在，让我们创建一个 ListComponent 及其相应的测试文件。在这个文件中，将定义一个名为 ListComponent 的 React 组件。它将接受一个属性项，并呈现一个无序列表，其中包含数组中每个项的列表项。此测试文件包含一个测试用例，用于检查 ListComponent 是否正确呈现列表项。此示例的代码如下 -

ListComponent.js

import React from 'react';

const ListComponent = ({ items }) => {
	 	return (
	 	 	 <ul>
	 	 	 	 	{items.map((item, index) => (
	 	 	 	 	 	 <li key={index}>{item}</li>
	 	 	 	 	))}
	 	 	 </ul>
	 	);
};

export default ListComponent;

ListComponent.test.js

	
import React from 'react';
import { create } from 'react-test-renderer';
import ListComponent from './ListComponent';

test('renders list items correctly', () => {
	 	const items = ['Item 1', 'Item 2', 'Item 3'];
	 	const component = create(<ListComponent items={items} />);
	 	const instance = component.root;
	 	
	 	const elements = instance.findAllByProps({ children: items });
	 	
	 	expect(elements.length).toBe(items.length);
});

输出

示例 - 条件渲染组件

在这个 React 应用程序中，我们将创建一个简单的 ToggleComponent，该组件将有一个按钮来切换段落的可见性。该组件还将有一个相应的测试文件 ToggleComponent.test.js，该文件使用 react-test-renderer 库来测试条件渲染行为。

ToggleComponent.js

import React, { useState } from 'react';

const ToggleComponent = () => {
	 	const [isToggled, setToggle] = useState(false);
	 	
	 	return (
	 	 	 <div>
	 	 	 	 	<button onClick={() => setToggle(!isToggled)}>Toggle</button>
	 	 	 	 	{isToggled && <p>This is visible when toggled!</p>}
	 	 	 </div>
	 	);
};

export default ToggleComponent;

ToggleComponent.test.js

	
import React from 'react';
import { create } from 'react-test-renderer';
import ToggleComponent from './ToggleComponent';

test('renders paragraph conditionally', () => {
	 	// Create a test instance
	 	const component = create(<ToggleComponent />);
	 	const instance = component.root;
	 	
	 	// Find elements in the component with props
	 	const elements = instance.findAllByProps({ children: 'This is visible when toggled!' });
	 	
	 	expect(elements.length).toBe(0);
	 	
	 	instance.findByType('button').props.onClick();
	 	
	 	const updatedElements = instance.findAllByProps({ children: 'This is visible when toggled!' });
	 	expect(updatedElements.length).toBe(1);
});

输出

这个例子展示了一种使用条件渲染测试 React 组件的简单方法。测试用例确保段落最初不可见，并在单击按钮时变得可见。

总结

testInstance.findAllByProps（） 函数通常用于测试 React 的库，以根据组件的属性定位组件并与之交互。借助此功能，可以更轻松地测试和验证应用程序中的特定行为。此函数用于查找具有特定属性的所有后代测试实例。因此，我们已经看到了可以使用此方法来测试我们的应用程序的不同场景。