【全栈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',() => {
    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的布尔值。

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