ReactJS - testInstance.findAllByProps() 方法

testInstance.findAllByProps() 方法用于查找具有某些属性的所有后代测试实例。简而言之，我们可以说它帮助我们定位并获取测试中符合特定特征的所有元素。

如果我们想要更具体并找到具有特定属性的实例，我们可以使用 testInstance.findAllByProps(props)。这意味着我们正在搜索具有指定属性(特性或特征)的测试实例。此方法是一种根据属性查找和收集测试中元素的工具。它就像一个测试组件的搜索函数。

语法

testInstance.findAllByProps(props)

参数

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

返回值

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

示例

示例 − 带有 Props 的基本组件

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

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 组件。它将采用一个 prop items 并呈现一个无序列表，其中包含数组中每个项目的列表项。此测试文件包含一个测试用例，用于检查 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', () => {
   // 创建测试实例
   const component = create(<ToggleComponent />);
   const instance = component.root;
   
   // 在组件中查找具有 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);
});