ReactJS - testInstance.instance 属性

组件实例对于类组件很重要，因为它有助于管理特定组件的内部状态和行为。当我们在类组件内部引用它时，我们指的是它的实例。这使我们能够与组件的状态、生命周期方法和其他功能进行交互。

在 React 测试中，有一个 testInstance.instance 的概念。此属性提供对与特定测试实例相关的组件实例的访问。它使我们能够在测试期间检查并与组件的内部工作进行交互。

语法

testInstance.instance

参数

testInstance − 表示测试环境中渲染的 React 组件。

.instance−允许我们访问正在测试的 React 组件的实际实例的属性或方法。

与此测试实例关联的组件实例。由于函数组件没有实例，因此只有类组件才有可能。它相当于给定组件中的此值。

返回值

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 />);
    
    // 触发增量方法
    testInstance.instance.increment();
    
    // 检查计数是否已更新
    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 />);
   
    // 检查挂载后的状态
    expect(testInstance.instance.state.message).toBe('Component has mounted!');
    
    // 检查渲染的输出是否与更新后的状态匹配
    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 />);
    
    // 触发 handleClick 方法
    fireEvent.click(screen.getByText('Click me'));
    
    // 检查组件状态是否已更新
    expect(testInstance.instance.state.clicked).toBe(true);
    expect(screen.getByText(/Clicked!/).textContent).toBe('Clicked!');
});

输出

摘要

了解 React 中的组件实例对于有效的组件管理和测试非常重要，尤其是在类组件的上下文中。通过了解这个概念，我们将能够管理 React 应用程序的复杂性。我们使用 testInstance.instance 方法创建了三个应用。这些应用和测试场景展示了测试 React 组件的各种元素，例如状态管理、生命周期方法以及与组件方法的交互。使用 testInstance.instance 可以在测试期间进行完整的测试和组件内部修改。

reactjs_reference_api.html