【全栈React】第23天: 实现测试
昨天我们检查了我们在React中写的不同类型的测试。今天我们亲自动手来看看结果。我们将安装设置测试所需的依赖关系以及写入我们的第一个断言。 让我们把我们的应用设置起来进行测试。因为我们将使用几个不同的库,所以我们需要在使用它们之前安装它们 (当然)。 依赖关系我们将使用下面的 jest/jest-cli是 Facebook 发布的官方测试框架,是测试React应用的绝佳测试框架。它非常快,提供沙盒测试环境,支持快照测试,等等。 babel-jest/babel-preset-stage-0我们将使用阶段 0 (或 ES6-edge 功能) 编写测试,因此我们希望确保我们的测试框架能够读取和处理我们的测试和源文件中的 ES6。 sinonSinon是一个测试实用程序库,它为我们提供了一种编写间谍(spies)、存根(stubs)和 模拟(mock) 的方法。我们将在需要时讨论这些内容,但现在我们将安装该库。 react-addons-test-utils/enzyme
Enzyme是由 Airbnb 构建/维护的 更易于使用的JavaScript 测试库,并且提供了遍历/操纵响应的虚拟 DOM 输出的非常好的方法。当我们开始使用 react-test-renderer
redux-mock-storeredux-mock-store库允许我们轻松地制作一个再现存储进行测试。我们将使用它来测试我们的动作创创建者,中间件,和我们的归并器。 To install all of these libraries,we'll use the following yarn add --dev babel-jest babel-preset-stage-0 enzyme jest-cli react-addons-test-utils react-test-renderer redux-mock-store sinon 配置我们还需要配置我们的安装程序。首先,让我们添加一个 npm 脚本,它将允许我们使用 { // ... "scripts": { "start": "react-scripts start","build": "react-scripts build","eject": "react-scripts eject","test": "react-scripts test --env=jsdom" },} 编写测试让我们确认我们的测试设置工作正常。Jest将在一个名为 mkdir src/components/Timeline/__tests__ touch src/components/Timeline/__tests__/Timeline-test.js
我们将使用 Jasmine框架编写测试。Jasmine提供了一些方法,我们将使用相当多的一些方法。以下两种方法都接受两个参数,第一种是描述字符串,第二个是要执行的函数:
在 describe('Timeline',() => { }); 我们可以使用 In the same file,let's add two tests:在同一个文件中,让我们添加两个测试: describe('Timeline',() => { it('passing test',() => { expect(true).toBeTruthy(); }) it('failing test',() => { expect(false).toBeTruthy(); }) }) 我们将看看可能的期望,我们可以设定在一个时刻。首先,让我们运行我们的测试。 执行测试
在终端中,让我们执行我们的测试: yarn test
从这个输出,我们可以看到两个测试,一个通过测试 (带有一个绿色的复选标记) 和一个失败的测试 (还有一个红色的 x 和失败的描述)。 让我们更新第二个测试,使它通过将期望更改为 describe('Timeline',() => { expect(false).toBeTruthy(); }) }) 重新运行测试,我们可以看到我们有两个通过测试 `yarn test`
期望在默认情况下,Jest在测试中提供了一些全局命令 (即没必要要求的内容)。其中之一是
在以下的 jest页面中可以获得一整套期望:https://facebook.github.io/jest/docs/api.html#writing-assertions-with-expect.
现在我们已经编写了第一个测试并确认了我们的设置,我们将在明天开始测试我们的时间轴组件。今天的工作很好,明天见!
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |