ReactJS - mockComponent()

當我們在應用中使用像 React 這樣的庫時，我們應該定期測試我們的元件。然而，有時檢查它們可能很困難，因為元件可能依賴於其他元件。這就是 `mockComponent()` 函式發揮作用的地方。

假設我們有一個程式碼元件，它有一個按鈕或一個表單，我們想要檢查它，但它依賴於其他元件。我們可以使用 `mockComponent()` 來建立一個這些其他元件的偽模型，以便我們可以測試我們的程式碼而無需實際使用它們。

語法

mockComponent(
   componentClass,
   [mockTagName]
)

引數

componentClass − 這是我們要模擬的元件。它是我們要為測試目的建立偽版本的類或模組。
[mockTagName] (可選) − 此引數位於方括號中，這意味著它不是必需的。如果我們提供此引數，它指定偽元件將模擬的 HTML 標籤名稱。如果我們不提供它，預設標籤名稱為 <div>。

返回值

mockComponent 函式返回給定元件類的模擬或偽版本。這允許我們隔離和測試我們的元件，而無需實際使用它的依賴項。

如何使用 mockComponent() 函式？

我們呼叫 `mockComponent()` 並提供我們要測試的元件。我們也可以告訴它偽元件應該是什麼樣的 HTML 標籤（通常是 <div>）。通常在真實元件內部的任何內容都將放在偽元件內部。

因此，`mockComponent()` 就像製作一個元件的假版本來幫助我們測試程式碼。需要注意的是，React 中有更新更好的方法來做到這一點，例如使用 `jest.mock()`，但 `mockComponent()` 是一個較舊的方法，我們可能仍然會在某些程式碼中遇到它。

示例

示例 - 模擬 Button 元件

這是一個如何在 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()` 來模擬 Icon 元件，從而為 Button 元件建立測試。我們可以使用一個測試檔案來完成它，讓我們稱之為 Button.test.js：

Button.test.js

import React from 'react';
import { shallow } from 'enzyme'; // Use Enzyme for testing
import { mockComponent } from 'react-dom/test-utils'; // Importing mockComponent

import Button from './Button';

// Mock the Icon component
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` prop 用於處理表單提交。

我們的測試應用測試了表單是否已渲染，並且可以透過與輸入欄位和提交按鈕互動來模擬表單提交。這裡 `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'; // Replace with 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 的子元件。為了測試目的，ChildComponent 被使用 `mockComponent` 函式替換為模擬版本。讓我們看看下面的應用：

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'; // Replace with 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()` 仍然是一個有價值的遺留 API，用於測試 React 元件。

reactjs_reference_api.htm

列印頁面