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 组件 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() 方法。