ReactJS - testInstance.instance 属性

---

---

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

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

语法

testInstance.instance

参数

• testInstance - 表示测试环境中呈现的React组件。
• .instance− 一个属性或方法，允许我们访问正在测试的 React 组件的实际实例。

与此测试实例关联的组件实例。因为函数组件没有实例，所以只有类组件才有可能。它等同于给定组件中的此值。

返回值

testInstance.instance 返回与特定测试实例相关的组件实例。它提供了对 React 组件的底层实例的访问，特别是在测试方面。

例子

示例 - 测试组件状态

在此示例中，我们将创建一个 Counter 应用程序，其中我们将有一个简单的 React 类组件来管理计数器状态。它将有一个递增计数器值的方法。此外，我们还将为该组件创建一个测试文件。该测试将确保在调用 increment 方法时，组件正确地递增计数器。为此，我们将使用 testInstance.instance 来访问组件实例并触发 increment 方法。因此，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 允许在测试期间完成测试和组件内部修改。