使用 Enzyme 库测试 react。这样可以使你的程序将更加可靠,并且更加容易避免回归。我们在这里用了 Jest,不过 Enzyme 也可以与 Mocha 和 Chai 之类的库一起使用。
Enzyme 是一个库,用于在测试时处理你的 react 组件。它由 Airbnb 开发。
继续上一篇文章的内容,假设你 Jest 已经能够工作了。如果还没有,请随时查看课程的上一部分。下面开始安装 Enzyme
npm install enzyme
首先要创建一个 setupTests.js 文件。它将包含 adapter 的用法,后者是一个附加库,允许你将 Enzyme 与一组特定的 React 版本一起使用。我将使用 React 16.x,所以需要安装 enzyme-adapter-react-16。有关兼容性列表,请查看 Enzyme repo。
你还可以找到 preact 和 inferno之类的库的适配器
npm install enzyme-adapter-react-16
完成之后,setupTests.js 文件的内容应如下所示:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({adapter: new Adapter()});
最后要做的是在 package.json 中提供此文件的路径
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/app/setupTests.js"
}
准备就绪!
佛山vi设计https://www.houdianzi.com/fsvi/ 豌豆资源搜索大全https://55wd.com
Enzyme 库的最基本用法是浅渲染。它允许你仅渲染父组件。“浅渲染”不但速度更快,而且非常适合单元测试。这样,你就不比测试传递给 shallow 函数的其他组件。
import React from 'react';
const App = () => {
return <h1>Hello world!</h1>
}
export default App;
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(<h1>Hello world!</h1>)).toEqual(true);
});
});
在这个简单测试中,我们正在检查 App 组件是否包含某个标头。运行 npm run test 后,你会看到一条成功消息。
PASS app/App.test.js
app component
✓ contains a header with the "Hello world!"
这里要注意一个非常重要的点:即使我们用了 Enzyme,但测试运行程序仍然是 Jest。由于我们用的是 expect 函数,因此可以使用各种可供调用的匹配器函数。我已经在课程的第一部分中提到了它们。相关列表,请访问 Jest 文档。
让我们创建一些更有趣的测试。先创建一个全新的组件。
import React from 'react';
const ToDoList = (props) => {
return (
<ul>
{
props.tasks.map((taskName, index) =>
<li key={index}>{taskName}</li>
)
}
</ul>
)
};
export default ToDoList;
让我们测试一下,如果提供的任务列表为空,将会发生什么,如果包含任务,又会发生什么。
import React from 'react';
import { shallow } from 'enzyme';
import ToDoList from './ToDoList';
describe('ToDoList component', () => {
describe('when provided with an empty array of tasks', () => {
it('contains an empty <ul> element', () => {
const toDoList = shallow(<ToDoList tasks={[]}/>);
expect(toDoList).toContainReact(<ul/>);
})
it('does not contain any <li> elements', () => {
const toDoList = shallow(<ToDoList tasks={[]}/>);
expect(toDoList.find('li').length).toEqual(0);
})
});
describe('when provided with an array of tasks', () => {
it('contains a matching number of <li> elements', () => {
const tasks = ['Wash the dishes', 'Make the bed'];
const toDoList = shallow(<ToDoList tasks={tasks}/>);
expect(toDoList.find('li').length).toEqual(tasks.length);
})
});
});
测试顺利通过,但是我们应该解释一些内容。
在第一个测试中,我们使用了 toContainReact 函数,这是一个自定义匹配器函数。它是 enzyme-matchers 库的一部分。要将其与 Jest 一起使用,请安装 jest-enzyme 包。
npm install jest-enzyme
最后要做的是将其导入 setupTests 文件中。
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-enzyme';
configure({adapter: new Adapter()});
有关其提供的功能列表,请查看自述文件。你会发现它非常有用。
在第二个测试中,我们在组件上调用了 find 函数。这要归功于 shallow 函数返回 ShallowWrapper,它是渲染输出的包装器。它有一组可供调用的函数。要检查函数列表,请转到 Enzyme 文档。
运行所有的测试会给我们带来成功的信息!
PASS app/App.test.js
PASS app/components/ToDoList/ToDoList.test.js
Test Suites: 2 passed, 2 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 1.41s
Ran all test suites.
本文中我们已经了解了使用 Enzyme 测试 React 组件的基本知识。我们已经介绍了安装 Enzyme 并运行第一个简单测试。使用的渲染类型称为“浅渲染”。之所以这样称呼,是因为它不渲染任何子组件。在编写单元测试时,它工作得很好。在本教程的后续部分中,我将介绍其他类型的渲染,并学习如何测试程序的不同部分。它将包括快照测试和模拟数据之类的技术。下次见!