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 的使用允许在测试期间完全测试和修改组件内部。