ReactJS - testInstance.findByType() 方法_ReactJS 菜鸟教程

测试就像编程世界中的英雄。它用于检查我们的代码是否按预期运行。在此过程中，findByType（） 函数是一个有用的工具。让我们检查一下这个函数以及它如何帮助我们。

findByType（） 是一个命令，可以帮助我们在一组测试中找到特定的测试实例。这就像有一位教练，指导我们进行我们想要参加的准确测试。

findByType（） 是一个有用的测试工具。此功能可以帮助我们在迷宫般的测试中导航，确保我们的测试过程既高效又有用。

一个更集中的方法是 testInstance.findByType（type）。它将搜索限制为单一类型的测试。将“类型”定义为帮助我们确定测试性质的类别或标签。

语法

testInstance.findByType(type)

参数

type − “type”根据测试的目的或用法定义测试。例如，我们可能有验证数字的测试，其他检查字符串的测试，等等。通过指定类型，findByType（）可以专注于给定类别中包含的测试。

返回值

当我们调用 testInstance.findByType（type） 时，该函数将返回一个与我们给出的类型匹配的后代测试实例。

例子

现在我们将使用 testInstance.findByType（type） 方法创建不同的 React 应用程序，以展示如何在各种场景中使用此函数。

示例 - 基本组件搜索

假设我们有一个包含各种组件的 React 应用程序，我们想使用 testInstance.findByType（type） 查找特定组件。

App.js

import React from 'react';
import ComponentA from './ComponentA';

function App() {
	 	return (
	 	 	 <div>
	 	 	 	 	<h1>React App</h1>
	 	 	 	 	<ComponentA />
	 	 	 </div>
	 	);
}

export default App;

ComponentA.js

import React from 'react';

const ComponentA = () => {
	 	return (
	 	 	 <div>
	 	 	 	 	<p>This is Component A</p>
	 	 	 </div>
	 	);
}

export default ComponentA;

App.test.js

	
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('Find ComponentA using findByType', () => {
	 	const { findByType } = render(<App />);
	 	const componentA = findByType('ComponentA');
	 	
	 	// perform further testing
	 	expect(componentA).toBeInTheDocument();
});

输出

基本组件搜索

此示例展示了一个基本的组件搜索场景，其中 testInstance.findByType（type）可用于测试 React 应用程序。

示例 - 动态组件渲染

在这种情况下，让我们想象一个 React 应用程序，其中组件根据用户交互动态呈现。所以这个应用程序的代码及其相应的测试用例如下 -

App.js

import React, { useState } from 'react';
import DynamicComponent from './components/DynamicComponent';

function App() {
	 	const [showComponent, setShowComponent] = useState(true);
	 	
	 	return (
	 	 	 <div>
	 	 	 	 	<h1>React App Example 2</h1>
	 	 	 	 	{showComponent && <DynamicComponent />}
	 	 	 </div>
	 	);
}

export default App;

DynamicComponent.js

import React from 'react';

const DynamicComponent = () => {
	 	return (
	 	 	 <div>
	 	 	 	 	<p>This is a Dynamic Component</p>
	 	 	 </div>
	 	);
}

export default DynamicComponent;

App.test.js

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('Find DynamicComponent using findByType', () => {
	 	const { findByType } = render(<App />);
	 	const dynamicComponent = findByType('DynamicComponent');
	 	
	 	// perform further testing
	 	expect(dynamicComponent).toBeInTheDocument();
});

输出

动态组件渲染

此示例展示了动态组件渲染场景，其中 testInstance.findByType（type） 可以应用于测试 React 应用程序。

示例 - 带有错误处理的条件渲染

在此示例中，我们将使用 testInstance.findByType（type） 探索具有条件渲染和错误处理的 React 应用程序。因此，此应用程序及其测试文件的代码如下 -

App.js

import React, { useState } from 'react';
import ErrorBoundary from './components/ErrorBoundary';

function App() {
	 	const [hasError, setHasError] = useState(false);
	 	
	 	const triggerError = () => {
	 	 	 setHasError(true);
	 	};
	 	
	 	return (
	 	 	 <div>
	 	 	 	 	<h1>React App Example 3</h1>
	 	 	 	 	<ErrorBoundary hasError={hasError} />
	 	 	 	 	<button onClick={triggerError}>Trigger Error</button>
	 	 	 </div>
	 	);
}

export default App;

ErrorBoundary.js

import React from 'react';

class ErrorBoundary extends React.Component {
	 	componentDidCatch(error, info) {
	 	 	 // Handle the error
	 	 	 console.error('Error caught:', error, info);
	 	}
	 	
	 	render() {
	 	 	 if (this.props.hasError) {
	 	 	 	 	// Render fallback UI in case of an error
	 	 	 	 	return <p>Something went wrong!</p>;
	 	 	 }
	 	 		
	 	 	 return this.props.children;
	 	}
}

export default ErrorBoundary;

App.test.js

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('Find ErrorBoundary using findByType', () => {
	 	const { findByType } = render(<App />);
	 	const errorBoundary = findByType('ErrorBoundary');
	 	
	 	// perform further testing
	 	expect(errorBoundary).toBeInTheDocument();
});

输出

错误处理

此示例展示了具有错误处理的条件渲染场景，其中 testInstance.findByType（type） 可以应用于测试 React 应用程序。

总结

testInstance.findByType（type） 将搜索限制为特定类型的测试。此方法的结果返回所提供类型的特定测试实例，假定唯一匹配。如果有任何错误，它将通过错误消息通知我们，提示我们调查和修改我们的请求或验证我们的测试组织。

请记住，该函数会尝试准确性，其返回的条件是获得给定类型的清晰、唯一的匹配。

<< ReactJS - testInstance.findByProps() 方法 ReactJS - testInstance.find() 方法 >>