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

本文转载自：众成翻译
译者：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的布尔值。

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