1. 首页
  2. ReactJS 菜鸟教程
  3. ReactJS - testInstance.find() 方法

ReactJS - testInstance.find() 方法

术语“testInstance”不是一个定义的 React 概念，但它通常在测试 React 组件时使用。它指的是在测试环境中渲染时生成的组件实例，允许我们执行测试并对其行为做出断言。

在编程中，我们可能需要使用 find（） 函数来定位特定的测试实例。让我们开始学习，并在本教程中介绍如何使用它。

find（） 函数充当侦探，在一组对象中查找某些东西。它的工作原理是将每个对象与另一个称为 test（） 的方法设置的标准进行比较。目标是只找到一个满足要求的对象。

语法

testInstance.find(test)

参数

  • testInstance - 这是我们想要搜索的一组对象。
  • test - 这是我们创建的一个特殊函数。它检查每个对象以查看它是否满足某些条件。如果它为一个对象返回 true，则如果找到该对象。

返回值

find（） 函数查看 testInstance 中的每个对象。对于每个对象，它运行 test（） 函数。如果 test（） 只对一个对象返回 true，则该对象就是结果。如果 test（） 没有为一个对象返回 true，则会发生错误。

例子

示例 - 按钮组件

在这个例子中，我们将有一个 Button 组件及其相应的测试文件。因此，我们可以在单击按钮后根据预期行为进行断言。假设我们想检查在单击按钮时是否调用了某个函数 （mockFunction）。代码如下 -

Button.js

import React from 'react';

const Button = ({ onClick, label }) => (
	 	<button onClick={onClick} data-testid="test-button">
	 	{label}
	 	</button>
);

export default Button;

Button.test.js

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

test('Button click works', () => {
	 	
	 	// Mock function to check if it is called
	 	const mockFunction = jest.fn(); 		
	 	render(<Button onClick={mockFunction} label="Click me" />);
	 	const buttonInstance = screen.getByTestId('test-button');
	 	fireEvent.click(buttonInstance);
	 	expect(mockFunction).toHaveBeenCalledTimes(1);
});

输出

按钮组件

示例 - 列表组件

在此示例中，测试是针对 List 组件的，我们必须对列表中的呈现项进行断言。假设我们想要检查列表是否以正确的顺序包含特定项目。toHaveTextContent 函数用于检查显示的 listInstance 是否包含请求的文本内容。

List.js

import React from 'react';

const List = ({ items }) => (
	 	<ul data-testid="test-list">
	 	{items.map((item, index) => (
	 	 	 <li key={index}>{item}</li>
	 	))}
	 	</ul>
);

export default List;

List.test.js

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

test('List renders items', () => {
	 	const items = ['Item 1', 'Item 2', 'Item 3'];
	 	render(<List items={items} />);
	 	const listInstance = screen.getByTestId('test-list');
	 	expect(listInstance).toHaveTextContent('Item 1');
	 	expect(listInstance).toHaveTextContent('Item 2');
	 	expect(listInstance).toHaveTextContent('Item 3');
});

输出

列表组件

示例 − 表单组件

在此应用程序中，我们将有一个表单组件Form.js及其各自的测试文件Form.test.js。在 Form 组件的测试中，在模拟输入上的更改事件后，我们想要检查输入的值是否已相应更新。所以代码如下 -

Form.js

import React, { useState } from 'react';

const Form = () => {
	 	const [inputValue, setInputValue] = useState(''); 		
	 	const handleChange = (e) => {
	 	 	 setInputValue(e.target.value);
	 	};
	 	
	 	return (
	 	 	 <form data-testid="test-form">
	 	 	 <input
	 	 	 	 	type="text"
	 	 	 	 	value={inputValue}
	 	 	 	 	onChange={handleChange}
	 	 	 	 	data-testid="test-input"
	 	 	 />
	 	 	 </form>
	 	);
};

export default Form;

Form.test.js

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

test('Form input changes value', () => {
	 	render(<Form />);
	 	const inputInstance = screen.getByTestId('test-input');
	 	fireEvent.change(inputInstance, { target: { value: 'New Value' } });
	 	expect(inputInstance.value).toBe('New Value');
});

输出

表单组件

总结

因此，find（） 函数允许我们在特殊条件检查函数的帮助下搜索对象集合。现在，通过创建三个不同的应用程序，我们已经深入了解了 testInstance.find（） 方法。

<< ReactJS - testInstance.findByType() 方法 ReactJS - testRenderer.root 属性 >>