ReactJS - testInstance.findByProps() 方法

---

---

testInstance.findByProps(props) 是一個測試函式。testInstance 最有可能指的是軟體測試環境中的測試例項或物件。findByProps(props) 是一個元件，這一事實表明我們正在測試例項中搜索特定的內容。“props”指的是屬性，即我們正在查詢的專案的屬性。

此程式碼查詢具有特定屬性的單個測試物件。這就像在許多物品中尋找特定物品。如果只有一個匹配項，則返回該例項。否則，將顯示錯誤訊息。

語法

testInstance.findByProps(props)

引數

props - “props”指的是屬性，即我們正在查詢的專案的屬性。

返回值

此程式碼查詢具有特定特徵的單個測試物件。這就像查詢一個物件。如果只有一個匹配項，則返回該例項。如果不是這種情況，則會顯示錯誤訊息。

示例

示例 - 基本元件測試

使用 testInstance.findByProps(props) 方法建立 React 應用涉及編寫測試用例，以在我們的 React 元件中查詢具有某些屬性的特定元素。以下是此應用的簡單程式碼 -

MyComponent.js

import React from 'react';

const MyComponent = ({ title }) => (
   <div>
      <h1>{title}</h1>
      <p>Hello, this is a simple component.</p>
   </div>
);

export default MyComponent;

MyComponent.test.js

 import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('finds the title using findByProps', () => {
   const { findByProps } = render(<MyComponent title="My App" />);
   const titleElement = findByProps({ title: 'My App' });
   expect(titleElement).toBeInTheDocument();
});

輸出

示例 - 列表元件測試

現在我們將建立一個名為 ListComponent 的 React 元件。它接收一個 prop item，它是一個數組。它渲染一個無序列表 (<ul>)，其中列表項 (<li>) 由 items 陣列的元素生成。

然後我們將為 ListComponent 元件建立 ListComponent.test.js。它使用來自 @testing-library/react 庫的 render 函式來渲染具有 prop items 的 ListComponent。測試函式正在檢查列表項是否包含文字“Item 2”，該項是否存在於使用 findByProps 渲染的元件中。

ListComponent.js

import React from 'react';

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

export default ListComponent;

ListComponent.test.js

import React from 'react';
import { render } from '@testing-library/react';
import ListComponent from './ListComponent';

test('finds the list item using findByProps', () => {
   const items = ['Item 1', 'Item 2', 'Item 3'];
   const { findByProps } = render(<ListComponent items={items} />);
   const listItem = findByProps({ children: 'Item 2' });
   expect(listItem).toBeInTheDocument();
});

輸出

此程式碼測試了具有專案列表的 ListComponent 的渲染，並檢查特定列表項（“Item 2”）是否存在於元件中，並藉助 findByProps 方法。

示例 - 表單元件測試

這次我們將建立一個名為 FormComponent 的 React 元件。它包含一個帶有輸入欄位的表單。輸入欄位使用 useState hook 進行控制以管理 inputValue。標籤具有 htmlFor 屬性，輸入欄位使用相同的 id。

然後我們將為 FormComponent 元件建立一個測試檔案 (FormComponent.test.js)。測試檢查輸入欄位是否以空值 (“”) 開始，並斷言它最初存在於文件中。fireEvent.change 模擬使用者在輸入欄位中鍵入“Hello, World!”。然後它使用 findByProps 搜尋具有更新值的輸入欄位，並斷言它存在於文件中。

FormComponent.js

import React, { useState } from 'react';

const FormComponent = () => {
   const [inputValue, setInputValue] = useState('');
   
   return (
      <form>
         <label htmlFor="inputField">Type something:</label>
         <input
            type="text"
            id="inputField"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
         />
      </form>
   );
};

export default FormComponent;

FormComponent.test.js

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import FormComponent from './FormComponent';

test('finds the input value using findByProps', async () => {
   const { findByProps } = render(<FormComponent />);
   const inputElement = findByProps({ value: '' });
   expect(inputElement).toBeInTheDocument();
   
   fireEvent.change(inputElement, { target: { value: 'Hello, World!' } });
   const updatedInputElement = findByProps({ value: 'Hello, World!' });
   expect(updatedInputElement).toBeInTheDocument();
});

此程式碼透過檢查當用戶在其中鍵入時輸入欄位是否正確更新來測試 FormComponent 的渲染和使用者互動。

總結

因此，testInstance.findByProps(props) 幫助我們在測試期間查詢具有特定屬性的物件。如果它找到完全一個匹配項，則測試成功。否則，將傳送錯誤。我們已經看到了可以使用此函式來測試 React 應用的不同應用和案例。