【全栈React】第23天: 实现测试

airborne007 发布于2019-08-21 11:50 / 1862人阅读

摘要：包包含由团队提供的测试实用程序。将在一个名为的目录中自动查找整个树中的测试文件是的带有下划线。让我们为时间轴组件创建第一个测试。其中之一是命令。现在我们已经编写了第一个测试并确认了我们的设置我们将在明天开始测试我们的时间轴组件。

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

昨天我们检查了我们在React中写的不同类型的测试。今天我们亲自动手来看看结果。我们将安装设置测试所需的依赖关系以及写入我们的第一个断言。

让我们把我们的应用设置起来进行测试。因为我们将使用几个不同的库, 所以我们需要在使用它们之前安装它们 (当然)。

依赖关系

我们将使用下面的npm 库:

jest/jest-cli

是 Facebook 发布的官方测试框架, 是测试React应用的绝佳测试框架。它非常快, 提供沙盒测试环境, 支持快照测试, 等等。

babel-jest/babel-preset-stage-0

我们将使用阶段 0 (或 ES6-edge 功能) 编写测试, 因此我们希望确保我们的测试框架能够读取和处理我们的测试和源文件中的 ES6。

sinon

Sinon是一个测试实用程序库, 它为我们提供了一种编写间谍(spies)、存根(stubs)和模拟(mock) 的方法。我们将在需要时讨论这些内容, 但现在我们将安装该库。

react-addons-test-utils/enzyme

react-addons-test-utils 包包含由React团队提供的测试实用程序。

Enzyme是由 Airbnb 构建/维护的更易于使用的JavaScript 测试库,并且提供了遍历/操纵响应的虚拟 DOM 输出的非常好的方法。当我们开始使用react-addons-test-utils, 我们将过渡到使用Enzyme, 我们更喜欢在我们的测试中使用它。

react-test-renderer

react-test-renderer 库允许我们使用jest库中的快照功能。快照是一种Jest的方式, 可将呈现的输出从虚拟 DOM 序列化为一个文件, 我们可以从一个测试自动进行比较。

redux-mock-store

redux-mock-store库允许我们轻松地制作一个再现存储进行测试。我们将使用它来测试我们的动作创创建者, 中间件, 和我们的归并器。

To install all of these libraries, we"ll use the following npm command in the terminal while in the root directory of our projects:要安装所有这些库, 我们将在项目的根目录中使用终端中的npm 命令:

yarn add --dev babel-jest babel-preset-stage-0 enzyme jest-cli react-addons-test-utils react-test-renderer redux-mock-store sinon

配置

我们还需要配置我们的安装程序。首先, 让我们添加一个 npm 脚本, 它将允许我们使用npm test 命令运行测试。在我们的项目根目录的package.json 文件, 让我们添加test 脚本。在package.json文件中查找脚本键, 然后添加test 命令, 如下所示:

{
  // ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "react-scripts test --env=jsdom"
  },
}

编写测试

让我们确认我们的测试设置工作正常。Jest将在一个名为__tests__ 的目录中自动查找整个树中的测试文件 (是的, 带有下划线)。让我们在我们的src/components/Timeline 目录中创建我们的第一个__tests__ 目录, 并创建我们的第一个测试文件:

mkdir src/components/Timeline/__tests__
touch src/components/Timeline/__tests__/Timeline-test.js

Timeline-test.js文件将包括我们的Timeline组件的所有测试 (如文件名所示)。让我们为时间轴组件创建第一个测试。

我们将使用 Jasmine框架编写测试。Jasmine提供了一些方法, 我们将使用相当多的一些方法。以下两种方法都接受两个参数, 第一种是描述字符串, 第二个是要执行的函数:

describe()

it()

describe() 函数为我们提供了一种将测试组合成逻辑包的方法。由于我们正在为我们的Timeline编写一组测试, 我们将在测试中使用describe() 函数来指示我们正在测试时间轴。

在src/components/Timeline/__tests__/Timeline-test.js文件中, 让我们添加描述块:

describe("Timeline", () => {

});

我们可以使用it() 函数添加第一个测试。it() 函数是我们将设定预期的位置。让我们用我们的第一个期望, 一个通过和一个失败来设置我们的测试, 这样我们可以看到输出的差异。

In the same file, let"s add two tests:在同一个文件中, 让我们添加两个测试:

describe("Timeline", () => {

  it("passing test", () => {
    expect(true).toBeTruthy();
  })

  it("failing test", () => {
    expect(false).toBeTruthy();
  })
})

我们将看看可能的期望, 我们可以设定在一个时刻。首先, 让我们运行我们的测试。

执行测试

create-react-app 包使用Jest自动为我们建立了一个质量测试环境,。我们可以使用yarn test或npm test脚本执行测试。

在终端中, 让我们执行我们的测试:

yarn test

从这个输出, 我们可以看到两个测试, 一个通过测试 (带有一个绿色的复选标记) 和一个失败的测试 (还有一个红色的 x 和失败的描述)。

让我们更新第二个测试, 使它通过将期望更改为toBeFalsy():

describe("Timeline", () => {

  it("passing test", () => {
    expect(true).toBeTruthy();
  })

  it("failing test", () => {
    expect(false).toBeTruthy();
  })
})

重新运行测试, 我们可以看到我们有两个通过测试

`yarn test`

期望

在默认情况下, Jest在测试中提供了一些全局命令 (即没必要要求的内容)。其中之一是expect() 命令。expect() 命令有几个期望, 我们可以调用它, 包括我们已经使用的两个:

toBeTruthy()

toBeFalsy()

toBe()

toEqual()

toBeDefined()

toBeCalled()

etc.

在以下的 jest页面中可以获得一整套期望:https://facebook.github.io/jest/docs/api.html#writing-assertions-with-expect.

expect() 函数采用单个参数: 返回要测试的值函数的返回值。例如, 我们已经写好的两个测试通过了true 和false的布尔值。

现在我们已经编写了第一个测试并确认了我们的设置, 我们将在明天开始测试我们的时间轴组件。今天的工作很好, 明天见!

云服务器 GPU云服务器全栈性能测试 react实现轮播图第7天:CSS入门 FCKeditor23

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

转载请注明本文地址：https://www.ucloud.cn/yun/87163.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】第24天: 测试应用

摘要：我们的第一个假设是非常简单的测试。我们正在测试以确保元素被包装在类中。在我们编写的每个测试中我们都需要将应用呈现在工作测试文档中。作为提醒我们可以使用命令或命令来运行测试。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3804原文：https://www.fullstackreact.com/30-days-of-react/...

ziwenxie 2019-08-21 11:50 评论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】第11天: 纯组件

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

Cciradih 2019-08-20 18:33 评论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