引入 Enzyme 并测试 React 组件

来源:http://www.chinese-glasses.com 作者:Web前端 人气:55 发布时间:2020-04-22
摘要:时间: 2019-09-19阅读: 93标签: 测试测试 props 时间: 2019-11-12阅读: 128标签: 测试 在上一篇文章中,我们测试了通过一些 props的结果。但是实际上,我们可以直接测试props。让我们回到上次的

时间: 2019-09-19阅读: 93标签: 测试测试 props

时间: 2019-11-12阅读: 128标签: 测试

在上一篇文章中,我们测试了通过一些 props 的结果。但是实际上,我们可以直接测试 props。让我们回到上次的ToDoList组件,不过这次要用一个新的Task组件。

使用Enzyme库测试React。这样可以使你的程序将更加可靠,并且更加容易避免回归。我们在这里用了Jest,不过Enzyme也可以与MochaChai之类的库一起使用。

ToDoList.js

Enzyme 基础

import React from 'react';import Task from "../Task/Task"; const ToDoList = (props) = { return ( ul { props.tasks.map(task = Task key={task.id} id={task.id} name={task.taskName}/ ) } /ul )}; export default ToDoList;

Enzyme是一个库,用于在测试时处理你的React组件。它由 Airbnb 开发。

我们将要测试ToDoList组件是否渲染Task组件,并将任务名称传递给他们。

设置 Enzyme

ToDoList.test.js

继续上一篇文章的内容,假设你Jest已经能够工作了。如果还没有,请随时查看课程的上一部分。下面开始安装Enzyme

import React from 'react';import { shallow } from 'enzyme';import ToDoList from './ToDoList'; describe('ToDoList component', () = { describe('when provided with an array of tasks', () = { it('passes them to the Task components', () = { const tasks = [ { id: 0, name: 'Wash the dishes' }, { id: 1, name: 'Make the bed' } ]; const toDoListInstance = shallow( ToDoList tasks={tasks}/ ); toDoListInstance.find('Task').forEach(taskInstance = { const taskProps = taskInstance.props(); const matchingTask = tasks.find(task = task.id === taskProps.id); expect(taskProps.name).toBe(matchingTask.name); }) }) });});
npm install enzyme

通过测试,我们可以确保Task组件能够从ToDoList接收正确的 props。

首先要创建一个setupTests.js文件。它将包含adapter的用法,后者是一个附加库,允许你将 Enzyme 与一组特定的React版本一起使用。我将使用React16.x,所以需要安装enzyme-adapter-react-16。有关兼容性列表,请查看Enzyme repo。

由于toDoListInstancetaskInstance均继承自ShallowWrapper,因此我们可以调用props函数。同样,你可以检查和更改状态。有关可用函数的完整列表,请访问文档。

你还可以找到preactinferno之类的库的适配器

但是如果我们想测试Task组件中li标记的实际内容怎么办?

npm install enzyme-adapter-react-16
toDoListInstance.find('Task').forEach(taskInstance = { const taskProps = taskInstance.props(); const matchingTask = tasks.find(task = task.id === taskProps.id); const listItem = taskInstance.first('li'); expect(listItem.text()).toBe(matchingTask.name);})

完成之后,setupTests.js文件的内容应如下所示:

运行测试后你将会看到一个错误:

setupTests.js

 FAIL app/components/ToDoList/ToDoList.test.js ToDoList component › when provided with array of tasks › passes them to the Task components expect(received).toBe(expected) // Object.is equality Expected: "Wash the dishes" Received: "Task /" 23 | const matchingTask = tasks.find(task = task.id === taskProps.id); 24 | const listItem = taskInstance.first('li');  25 | expect(listItem.text()).toBe(matchingTask.name); | ^ 26 | }) 27 | }) 28 | });
import { configure } from 'enzyme';import Adapter from 'enzyme-adapter-react-16'; configure({adapter: new Adapter()});

使用mount函数渲染

最后要做的是在package.json中提供此文件的路径

失败了,因为我们在这里用了“浅渲染”。在这种情况下子组件将根本不会被渲染。所以上面的测试失败了,你需要了解“浅渲染”的局限性。

package.json

Mount模拟了 DOM 的实现,而Jest10bet,默认使用jsdom。你可以通过testEnvironment 属性进行更改。

"jest": { "setupTestFrameworkScriptFile": "rootDir/app/setupTests.js"}

在早期版本的Enzyme中,在浅层渲染期间未调用生命周期方法。但是在 Enzyme 3.0 中发生了变化

准备就绪!

const toDoListInstance = mount( ToDoList tasks={tasks}/);

浅渲染

运行上面的代码将使整个 ToDoList 组件及其所有子组件渲染。前面失败的测试现在将会通过。

Enzyme库的最基本用法是浅渲染。它允许你仅渲染父组件。“浅渲染”不但速度更快,而且非常适合单元测试。这样,你就不比测试传递给shallow函数的其他组件。

由于mount函数可渲染更多内容并模仿实际的 DOM,所以测试将会花费更多时间。使用mount函数可能意味着你是在进行单元测试,而现在在进行集成测试。正是由于这个事实,使用mount函数能够测试这些组件是否可以协同工作,而不仅仅是单独的单元测试。

App.js

要弄清楚单元测试集成测试的区别,请参见本教程第一部分。

import React from 'react'; const App = () = { return h1Hello world!/h1} export default App;

在测试与 DOM 的交互或高阶组件时,它也被证明是有用的。

App.test.js

要了解有关高阶组件的更多信息,请查看官方指南和David Kopal 的文章快照测试

import React from 'react';import { shallow } from 'enzyme';import App from './App'; describe('app component', () = { it('contains a header with the "Hello world!"', () = { const app = shallow(App/); expect(app.containsMatchingElement(h1Hello world!/h1)).toEqual(true); });});

本文由10bet发布于Web前端,转载请注明出处:引入 Enzyme 并测试 React 组件

关键词:

上一篇:没有了

下一篇:没有了

最火资讯