【全栈React】第24天: 测试应用

ziwenxie 发布于2019-08-21 11:50 / 540人阅读

摘要：我们的第一个假设是非常简单的测试。我们正在测试以确保元素被包装在类中。在我们编写的每个测试中我们都需要将应用呈现在工作测试文档中。作为提醒我们可以使用命令或命令来运行测试。

本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3804
原文：https://www.fullstackreact.com/30-days-of-react/day-24/

我们先看一下我们应用的一个特征，并考虑边缘案例的位置以及我们假设将会发生的情况

.让我们从Timeline 组件开始, 因为它是我们当前应用中最复杂的。

Timeline 组件显示一个具有动态标题的标题的状态列表。我们要测试我们的组件中的任何动态逻辑。我们必须从测试开始的最简单的逻辑是围绕Timeline 的动态标题。

我们喜欢开始测试, 列出我们对一个组件的假设, 以及在什么情况下这些假设是真实的。例如, 我们可以对Timeline 组件进行假设的列表可能包括以下内容:

在任何情况下, Timeline 将包含一个有.notificationsFrame 类的

。

在任何情况下, 我们可以假设会有一个标题

在任何情况下, 我们假设搜索按钮将开始隐藏

有至少四状态更新的列表

这些假设将转化为我们的测试。

测试

让我们打开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();
  });

})

如果我们运行这个测试 (尽管我们还没有设定任何期望), 我们会发现测试代码有问题。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();
    const node =
    TestUtils
      .findRenderedDOMComponentWithClass(wrapper, "notificationsFrame");
  });

})

这样, 我们的测试就会通过 (相信与否)。TestUtils 设置了一个期望, 即它可以在.notificationsFrame 类中找到该组件。如果它没有找到一个, 它将抛出一个错误, 我们的测试将失败。

作为提醒, 我们可以使用 npm test 命令或yarn test 命令来运行测试。我们将使用yarn test 命令, 因为我们正在测试一个组件:

yarn test

通过我们的一次测试, 我们确认了我们的测试设置正在运行。

不幸的是, TestUtils 的界面有点复杂和低级。enzyme 库是TestUtils的封装, 提供一个更容易和高级的界面, 断言针对的React组件在测试。明天我们将详细讨论酶。

今天的工作很好, 明天见!

GPU云服务器云服务器全栈性能测试阿里云轻量应用服务器24元第7天:CSS入门人工智能及其应用第四版

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87162.html

【全栈React】React 30天教程索引

摘要：今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。今天我们正在研究一种处理提出的复杂数据的方法，称为体系结构。第天部署介绍今天，我们将探讨部署我们的应用所涉及的不同部分，以便外界可以使用我们的应用。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

appetizerio 2019-08-20 18:33 评论0 收藏0
【全栈React】第11天: 纯组件

摘要：今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。为了获得更多的性能和简单性，同样允许我们使用正常的函数创建纯粹的，无状态的组件。在中，功能组件被称为一个参数的类似于构造函数类，它们是它所调用的，以及组件树的当前。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3819原文：https://www.fullstackrea...

Cciradih 2019-08-20 18:33 评论0 收藏0
【全栈React】第22天: 测试简介

摘要：我们将讨论三种不同的软件测试范例单元测试功能测试和集成测试。在中单元测试通常不需要浏览器可以快速运行不需要写入断言本身通常是简单而简洁的。集成测试最后我们将研究的最后一种测试是集成测试。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3809原文：https://www.fullstackreact.com/30-days-of...

qc1iu 2019-08-21 11:50 评论0 收藏0
【全栈React】第29天: 持续集成

摘要：本文转载自众成翻译译者链接原文今天，我们将介绍一些可持续的集成解决方案，为我们提供运行测试以及实施测试我们在云端的应用。我们已经启动了一个测试套件但是现在我们要确保它在部署之前完全通过。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3801原文：https://www.fullstackreact.com/30-days-of...

xavier 2019-08-21 11:52 评论0 收藏0
【全栈React】第4天: 复杂组件

摘要：本文转载自众成翻译译者链接原文太棒了，我们已经构建了第一个组件。天前一章节，我们开始构建我们的第一个组件。内容部分内有个不同的项目组件。决定划分组件的深度比科学更显得艺术。子组件当组件嵌套在另一个组件中时，它被称为子组件。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3817原文：https://www.fullstackre...

Mike617 2019-08-20 18:29 评论0 收藏0