Enzyme 组件测试中模拟父组件传参
在前端开发中，测试是必不可少的一步。在 React 应用中，组件测试尤为重要。Enzyme 是一个 React 组件测试工具，它可以让我们轻松测试组件的形状、行为和状态。
在测试组件时，有时候我们需要模拟父组件传参的情况。在本文中，我们将介绍如何在 Enzyme 中模拟父组件传参。
示例代码
在本文中，我们将以一个非常基本的 React 组件作为示例代码。这个组件接受一个名字作为 prop，并在页面上显示这个名字。
import React from 'react';
export default function Name({ name }) {
return <div>{name}</div>;
}我们将测试这个组件，确保它可以正确地显示名字。我们需要模拟一个父组件传入一个名字的情况。
使用 Enzyme 进行测试
首先，我们需要安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
然后，我们需要配置 Enzyme，通过为它提供一个适配器来告诉它如何与 React 进行交互。
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });接下来，我们可以编写我们的测试代码了。我们将使用 Jest 作为测试运行器，在测试文件中编写测试代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ---- ---- ---------
------------------ -------- --- --------- ---
-------------- ----------- -- -- -
----------- --- ------ -- -- -
----- ---- - -------
----- ------- - ------------- ----------- ----
-------------------------------------
---
---这个测试代码运行了一个测试：确保当 Name 组件接收到一个 name prop 时，它会在页面上显示这个名字。我们创建了一个 shallow 渲染器，然后传入一个包含名字的 props 的 <Name> 组件实例。
模拟父组件传参
现在我们将模拟一个父组件传学生名字的情况。假设我们现在有一个父组件：
import React from 'react';
import Name from './Name';
export default function Student() {
return <Name name="John" />;
}我们将测试 Student 组件而不是 Name 组件，所以我们需要修改测试代码。
我们将使用 jest.mock 来模拟 Name 组件。在测试文件的顶部添加以下代码：
jest.mock('./Name', () => {
return function DummyName(props) {
return <div>{props.name}</div>;
};
});这部分代码将 Name 组件替换为一个名为 DummyName 的函数组件，它只是简单地渲染出名字。
现在我们可以更新我们的测试用例，测试 Student 组件是否能够成功渲染出 "John"：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ------- ---- ------------
------------------ -------- --- --------- ---
----------------- ----------- -- -- -
----------- --- ------ -- -- -
----- ------- - ---------------- ----
---------------------------------------------------
---
---我们测试了 Student 组件是否能够成功渲染出 <Name name="John" /> 的结果，即 "John"。没错，测试通过了！
结论
在本文中，我们介绍了如何在 Enzyme 组件测试中模拟父组件传参。我们使用了 mock 替换了 Name 组件，并测试了它的父组件 Student。在项目中，这一技巧可以帮助我们更容易地编写测试代码，确保我们的组件可以正确地响应父组件传参的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671ce7279babaf620fb368b1