ReactJS - mockComponent()

当我们在应用程序中使用像 React 这样的库时，我们应该定期测试我们的组件。但是，检查它们有时可能很困难，因为组件可能依赖于其他组件。这就是 mockComponent() 函数的作用所在。

假设我们有一个代码组件，它有一个我们想要检查的按钮或表单，但它依赖于其他组件。我们可以使用 mockComponent() 创建这些其他组件的虚假模型，这样我们就可以在不实际使用它们的情况下测试我们的代码。

语法

mockComponent(
    componentClass,
    [mockTagName]
)

参数

componentClass − 这是我们想要模拟的组件。它是我们想要为测试目的创建虚假版本的类或模块。
[mockTagName](可选) − 此参数位于方括号中，表示不是必需的。如果我们提供此参数，它将指定虚假组件将模仿的 HTML 标记名称。如果我们不提供它，则默认标记名称为 <div>。

返回值

mockComponent 函数返回给定组件类的模拟或虚假版本。这使我们能够隔离和测试我们的组件，而无需实际使用其依赖项。

如何使用 mockComponent() 函数?

我们调用 mockComponent() 并为其提供我们要测试的组件。我们还可以告诉它虚假组件应该是什么样的 HTML 标记(通常是 <div>)。任何通常位于真实组件内的内容都将放入假组件内。

因此，mockComponent() 就像制作一个组件的假装版本来帮助我们测试代码。需要注意的是，在 React 中有更新更好的方法可以做到这一点，比如使用 jest.mock()，但 mockComponent() 是一种较旧的方法，我们可能仍会在某些代码中遇到它。

示例

示例 − 模拟按钮组件

以下是我们在 React − 中使用 mockComponent() 的示例

假设我们有一个名为 Button.js 的 React 组件，我们想要测试它。该组件依赖于另一个名为 Icon.js 的组件，我们想要使用 mockComponent() 模拟它。

Button.js

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

function Button() {
   return (
      <button>
         <Icon name="star" />
         Click me
      </button>
   );
}

export default Button;

现在，我们可以借助 mockComponent() 为 Button 组件创建一个测试，以模拟 Icon 组件。因此，我们可以使用测试文件来完成此操作，我们将其命名为 Button.test.js −

Button.test.js

import React from 'react';
import { shallow } from 'enzyme'; // 使用 Enzyme 进行测试
import { mockComponent } from 'react-dom/test-utils'; // 导入 mockComponent

import Button from './Button';

// 模拟 Icon 组件
const MockedIcon = mockComponent(Icon);

test('Button renders with a mocked Icon', () => {
   const wrapper = shallow(<Button />);
   expect(wrapper.contains(<MockedIcon name="star" />)).toBeTruthy();
});

在此示例中，我们从 react-dom/test-utils 导入 mockComponent，并使用 mockComponent(Icon) 创建 Icon 组件的模拟版本。然后，模拟版本将用于我们对 Button 组件的测试。

示例 − 模拟表单组件

我们将定义一个简单的 React 应用，其中呈现了一个 Form 组件，我们将使用 mockComponent 创建 Form 组件的模拟版本以供测试。Form 组件采用 onSubmit 属性来处理表单提交。

我们的测试应用测试表单是否呈现，并且它可以通过与输入字段和提交按钮交互来模拟表单提交。这里，mockComponent 函数用于创建 Form 组件的模拟版本以供测试。

Form.js

import React from 'react';

const Form = ({ onSubmit }) => (
   <form onSubmit={onSubmit}>
      <input type="text" />
      <button type="submit">Submit</button>
   </form>
);

export default Form;

App.js

import React from 'react';
import { render } from '@testing-library/react';
import { mockComponent } from 'your-testing-library'; // 用测试库替换
import Form from './Form';

const MockedForm = mockComponent(Form, 'div');
test('renders a form', () => {
   const { getByText } = render(<MockedForm />);
   const submitButton = getByText('Submit');
   expect(submitButton).toBeInTheDocument();
});

示例 − 使用子组件模拟父组件

此 React 应用包含一个 ParentComponent，它渲染一个名为 ChildComponent 的子组件。出于测试目的，使用 mockComponent 函数将 ChildComponent 替换为模拟版本。让我们看看下面的应用 −

ParentComponent.js

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

const ParentComponent = () => (
   <div>
      <p>This is a parent component</p>
      <ChildComponent />
   </div>
);

export default ParentComponent;

App.js

import React from 'react';
import { render } from '@testing-library/react';
import { mockComponent } from 'your-testing-library'; // 用测试库替换

import ParentComponent from './ParentComponent';

const MockedChildComponent = mockComponent(() => <div>Mocked Child</div>, 'div');
const MockedParentComponent = mockComponent(ParentComponent, 'div');

test('renders a parent component with a mocked child', () => {
   const { getByText } = render(<MockedParentComponent />);
   const parentText = getByText('This is a parent component');
   const mockedChildText = getByText('Mocked Child');
   
   expect(parentText).toBeInTheDocument();
   expect(mockedChildText).toBeInTheDocument();
});

摘要

mockComponent() 是一种有用的工具，可通过生成依赖组件的模拟版本来简化 React 组件测试。它通过确保测试针对单个组件的功能而不是其依赖项来实现有效的测试。mockComponent() 有替代方案，例如 jest.mock()，mockComponent() 仍然是测试 React 组件的宝贵遗留 API。

reactjs_reference_api.html