ReactJS - testInstance.find() 方法

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

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

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

语法

testInstance.find(test)

参数

testInstance − 这是我们要搜索的对象组。

test − 这是我们创建的一个特殊函数。它检查每个对象是否满足某些条件。如果为一个对象返回 true，则表示找到了该对象。

返回值

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

示例

示例 − 按钮组件

在示例中，我们将有一个按钮组件及其对应的测试文件。因此，我们可以根据单击按钮后的预期行为做出断言。假设我们想检查单击按钮时是否调用某个函数 (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', () => {
   
   // 模拟函数来检查它是否被调用
   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 组件

在此示例中，测试针对 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.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');
});