ReactJS - testInstance.instance 屬性

---

---

元件例項對於類元件非常重要，因為它有助於管理該特定元件的內部狀態和行為。當我們在類元件內部引用 this 時，我們指的是它的例項。這使我們能夠與元件的狀態、生命週期方法和其他功能進行互動。

在 React 測試中，有一個 testInstance.instance 的概念。此屬性提供了對與特定測試例項相關的元件例項的訪問。它允許我們在測試期間檢查和互動元件的內部工作原理。

語法

testInstance.instance

引數

testInstance - 表示測試環境中渲染的 React 元件。

.instance - 一個屬性或方法，允許我們訪問正在測試的 React 元件的實際例項。

與該測試例項關聯的元件例項。因為函式元件沒有例項，所以它只適用於類元件。它等效於給定元件內的 this 值。

返回值

testInstance.instance 返回與特定測試例項相關的元件例項。它提供了對 React 元件的基礎例項的訪問，尤其是在測試方面。

示例

示例 - 測試元件狀態

在這個示例中，我們將建立一個 Counter 應用，其中我們將有一個簡單的 React 類元件來管理計數器狀態。它將有一個方法來遞增計數器值。我們還將為該元件建立一個測試檔案。該測試將確保當呼叫遞增方法時，元件正確地遞增計數器。為此，我們將使用 testInstance.instance 訪問元件例項並觸發遞增方法。因此，Counter 元件及其測試檔案的程式碼如下所示：

Counter.js

import React, { Component } from 'react';

class Counter extends Component {
   constructor() {
      super();
      this.state = { count: 0 };
   }
   
   increment() {
      this.setState((prevState) => ({ count: prevState.count + 1 }));
   }
   
   render() {
      return (
         <div>
            <p>Count: {this.state.count}</p>
         </div>
      );
   }
}

export default Counter;

Counter.test.js

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

test('increments the count', () => {
   const { testInstance } = render(<Counter />);
   
   // Trigger the increment method
   testInstance.instance.increment();
   
   // Check if the count has been updated
   expect(screen.getByText(/Count:/).textContent).toBe('Count: 1');
});

輸出

示例 - 測試元件生命週期

現在我們將建立一個 LifecycleExample 應用，其中我們將有一個 React 類元件，在掛載後顯示一條訊息。它將利用 componentDidMount 生命週期方法在掛載後更新狀態。其次，我們還將建立它的測試檔案，以透過使用 testInstance.instance 訪問元件例項來檢查元件的生命週期。它將驗證狀態是否在元件掛載後按預期更新，並檢查渲染的輸出是否與更新後的狀態匹配。因此，程式碼如下所示：

LifecycleExample.js

import React, { Component } from 'react';

class LifecycleExample extends Component {
   constructor() {
      super();
      this.state = { message: '' };
   }
   
   componentDidMount() {
      this.setState({ message: 'Component has mounted!' });
   }
   
   render() {
      return <p>{this.state.message}</p>;
   }
}

export default LifecycleExample;

LifecycleExample.test.js

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

test('checks component lifecycle', () => {
   const { testInstance } = render(<LifecycleExample />);
   
   // Check the state after mounting
   expect(testInstance.instance.state.message).toBe('Component has mounted!');
   
   // Check if the rendered output matches the updated state
   expect(screen.getByText(/Component has mounted!/).textContent).toBe('Component has mounted!');
});

輸出

示例 - 與元件方法互動

在第三個示例中，我們將有一個 ClickButton 應用，它是一個 React 類元件，用於表示一個按鈕，當單擊它時切換其狀態。它還將有一個方法 handleClick，它將更新狀態以顯示該按鈕已被單擊。

接下來，我們將建立其相應的測試檔案，以透過使用 fireEvent.click 方法單擊按鈕來與元件進行互動。然後，它將使用 testInstance.instance 檢查元件狀態是否已按預期更新。

ClickButton.js

import React, { Component } from 'react';

class ClickButton extends Component {
   constructor() {
      super();
      this.state = { clicked: false };
   }
   
   handleClick() {
      this.setState({ clicked: true });
   }
   
   render() {
      return (
         <button onClick={() => this.handleClick()}>
            {this.state.clicked ? 'Clicked!' : 'Click me'}
         </button>
      );
   }
}

export default ClickButton;

ClickButton.test.js

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

test('handles button click', () => {
   const { testInstance } = render(<ClickButton />);
   
   // Trigger the handleClick method
   fireEvent.click(screen.getByText('Click me'));
   
   // Check if the component state has been updated
   expect(testInstance.instance.state.clicked).toBe(true);
   expect(screen.getByText(/Clicked!/).textContent).toBe('Clicked!');
});

輸出

總結

瞭解 React 中的元件例項對於有效的元件管理和測試非常重要，尤其是在類元件的上下文中。通過了解這個概念，我們將能夠管理 React 應用的複雜性。我們使用 testInstance.instance 方法建立了三個應用。這些應用和測試場景展示了測試 React 元件的各個方面，例如狀態管理、生命週期方法以及與元件方法的互動。testInstance.instance 的使用允許在測試期間完全測試和修改元件內部。