本文转载自:众成翻译
译者:iOSDevLog
链接:http://www.zcfy.cc/article/3804
原文:https://www.fullstackreact.com/30-days-of-react/day-24/
我们先看一下我们应用的一个特征,并考虑边缘案例的位置以及我们假设将会发生的情况
.让我们从Timeline
组件开始, 因为它是我们当前应用中最复杂的。
Timeline
组件 显示 一个具有动态标题的标题的状态列表。我们要测试我们的组件中的任何动态逻辑。我们必须从测试开始的最简单的逻辑是围绕Timeline
的动态标题。
我们喜欢开始测试, 列出我们对一个组件的假设, 以及在什么情况下这些假设是真实的。例如, 我们可以对Timeline
组件进行假设的列表可能包括以下内容:
在任何情况下,
Timeline
将包含 一个有.notificationsFrame
类的<div />
。在任何情况下, 我们可以假设会有一个标题
在任何情况下, 我们假设搜索按钮将开始隐藏
有至少四状态更新的列表
这些 假设 将转化为我们的测试。
测试
让我们打开src/components/Timeline/__tests__/Timeline-test.js
文件。我们在这个文件中留下了一些虚拟测试, 所以让我们清除这些, 并开始一个新的描述块:
describe('Timeline', () => {
// Tests go here
})
对于我们编写的针对React每个测试的我们都希望测试文件导入React。我们还要引入React测试实用程序:
import React from 'react';
import TestUtils from 'react-addons-test-utils';
describe('Timeline', () => {
// Tests go here
})
由于我们在这里测试Timeline
组件, 因此我们还希望将其引入到我们的工作区中:
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import Timeline from '../Timeline';
describe('Timeline', () => {
// Tests go here
})
让我们写第一个测试。我们的第一个假设是非常简单的测试。我们正在测试以确保元素被包装在.notificationsFrame
类中。在我们编写的每个测试中, 我们都需要将应用呈现在工作测试文档中。react-addons-test-utils
库提供了一个函数来执行这个叫做renderIntoDocument()
:
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import Timeline from '../Timeline';
describe('Timeline', () => {
it('wraps content in a div with .notificationsFrame class', () => {
const wrapper = TestUtils.renderIntoDocument(<Timeline />);
});
})
如果我们运行这个测试 (尽管我们还没有设定任何期望), 我们会发现测试代码有问题。React认为我们正在尝试呈现一个未定义的组件:
让我们在 DOM 中使用另一个称为findRenderedDOMComponentWithClass()
的TestUtils
函数来找到我们期望的元素。
findRenderedDOMComponentWithClass()
函数接受 两个 参数。第一个是渲染树 (我们的wrapper
对象), 第二个是我们希望它查找的 css 类名:
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import Timeline from '../Timeline';
describe('Timeline', () => {
it('wraps content in a div with .notificationsFrame class', () => {
const wrapper = TestUtils.renderIntoDocument(<Timeline />);
const node =
TestUtils
.findRenderedDOMComponentWithClass(wrapper, 'notificationsFrame');
});
})
这样, 我们的测试就会通过 (相信与否)。TestUtils 设置了一个期望, 即它可以在.notificationsFrame
类中找到该组件。如果它没有找到一个, 它将抛出一个错误, 我们的测试将失败。
作为提醒, 我们可以使用 npm test
命令或yarn test
命令来运行测试。我们将使用yarn test
命令, 因为我们正在测试一个组件:
yarn test
通过我们的一次测试, 我们确认了我们的测试设置正在运行。
不幸的是, TestUtils
的界面有点复杂和低级。enzyme
库是TestUtils
的封装, 提供一个更容易和 高级 的界面, 断言针对的React组件在测试。明天我们将详细讨论酶。
今天的工作很好, 明天见!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。