ReactJS - testInstance.findAllByProps() 方法

---

---

testInstance.findAllByProps() 方法用於查詢所有具有某些屬性的後代測試例項。簡單來說，它可以幫助我們定位並獲取測試中與特定特徵匹配的所有元素。

如果我們想更具體地查詢具有特定屬性的例項，可以使用 testInstance.findAllByProps(props)。這意味著我們正在搜尋具有指定屬性（屬性或特徵）的測試例項。此方法是根據其屬性查詢和收集測試中元素的工具。它就像一個用於測試元件的搜尋函式。

語法

testInstance.findAllByProps(props)

引數

props − 這是我們提供給函式的輸入。它顯示了我們想要在測試例項中查詢的屬性或特徵。這些可以是我們正在查詢的特定屬性或特徵。

返回值

該函式將返回與特定屬性匹配的測試例項集合。它為我們提供了一個具有我們正在搜尋的特徵的測試元素列表。

示例

示例 - 帶有 Props 的基本元件

我們將建立一個簡單的 React 元件及其對應的測試檔案。此檔案定義了一個名為 SimpleComponent 的基本 React 元件。它接受一個 prop text 並將其渲染在 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', () => {
   // 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 的測試庫中，根據其屬性查詢和與元件互動。此函式使測試和驗證應用程式中的特定行為更加容易。此函式用於查詢所有具有特定屬性的後代測試例項。因此，我們已經看到了可以使用此方法測試我們的應用程式的不同場景。