ReactJS - testInstance.find() 方法

---

---

術語“testInstance”不是 React 中定義的概念，但通常在測試 React 元件時使用。它指的是元件在測試環境中渲染時生成的元件例項，允許我們執行測試並對元件的行為進行斷言。

在程式設計中，我們可能需要使用 find() 函式來定位特定的測試例項。讓我們開始並學習本教程中如何使用它。

find() 函式就像一個偵探，在一個物件組中查詢某個東西。它的工作原理是將每個物件與另一個名為 test() 的方法設定的條件進行比較。目標是找到唯一滿足要求的一個物件。

語法

testInstance.find(test)

引數

testInstance - 這是我們要搜尋的物件組。

test - 這是我們建立的一個特殊函式。它檢查每個物件是否滿足某些條件。如果它對一個物件返回 true，則表示找到了該物件。

返回值

find() 函式檢視 testInstance 中的每個物件。對於每個物件，它都會執行 test() 函式。如果 test() 對恰好一個物件返回 true，則該物件就是結果。如果 test() 對不恰好一個物件返回 true，則會發生錯誤。

示例

示例 - 按鈕元件

在這個示例中，我們將有一個 Button 元件及其對應的測試檔案。因此，我們可以在點選按鈕後根據預期行為進行斷言。假設我們想要檢查在點選按鈕時是否呼叫了某個函式 (mockFunction)。程式碼如下所示：

Button.js

import React from 'react';

const Button = ({ onClick, label }) => (
   <button onClick={onClick} data-testid="test-button">
   {label}
   </button>
);

export default Button;

Button.test.js

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

test('Button click works', () => {
   
   // Mock function to check if it is called
   const mockFunction = jest.fn();   
   render(<Button onClick={mockFunction} label="Click me" />);
   const buttonInstance = screen.getByTestId('test-button');
   fireEvent.click(buttonInstance);
   expect(mockFunction).toHaveBeenCalledTimes(1);
});

輸出

示例 - 列表元件

在這個示例中，測試針對 List 元件，我們需要對列表中渲染的項進行斷言。假設我們想要檢查列表是否包含特定項且順序正確。toHaveTextContent 函式用於檢查顯示的 listInstance 是否包含請求的文字內容。

List.js

import React from 'react';

const List = ({ items }) => (
   <ul data-testid="test-list">
   {items.map((item, index) => (
      <li key={index}>{item}</li>
   ))}
   </ul>
);

export default List;

List.test.js

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

test('List renders items', () => {
   const items = ['Item 1', 'Item 2', 'Item 3'];
   render(<List items={items} />);
   const listInstance = screen.getByTestId('test-list');
   expect(listInstance).toHaveTextContent('Item 1');
   expect(listInstance).toHaveTextContent('Item 2');
   expect(listInstance).toHaveTextContent('Item 3');
});

輸出

示例 - 表單元件

在這個應用中，我們將有一個 Form 元件 Form.js 及其相應的測試檔案 Form.test.js。在 Form 元件的測試中，在模擬輸入上的更改事件後，我們想要檢查輸入的值是否已相應更新。因此，程式碼如下所示：

Form.js

import React, { useState } from 'react';

const Form = () => {
   const [inputValue, setInputValue] = useState('');   
   const handleChange = (e) => {
      setInputValue(e.target.value);
   };
   
   return (
      <form data-testid="test-form">
      <input
         type="text"
         value={inputValue}
         onChange={handleChange}
         data-testid="test-input"
      />
      </form>
   );
};

export default Form;

Form.test.js

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

test('Form input changes value', () => {
   render(<Form />);
   const inputInstance = screen.getByTestId('test-input');
   fireEvent.change(inputInstance, { target: { value: 'New Value' } });
   expect(inputInstance.value).toBe('New Value');
});

輸出

總結

因此，find() 函式允許我們藉助一個特殊的條件檢查函式來搜尋物件集合。現在，我們透過建立三個不同的應用程式，深入瞭解了 testInstance.find() 方法。