组件进行单元测量试验,你要求精晓的前端测验

您需求明白的前端测量检验“金字塔”

2017/11/24 · JavaScript · 测试

原稿出处: oschina   

图片 1

即使你正在测验前端应用程序,则应当通晓前端测量试验金字塔。

在本文中,大家将见到前端测验金字塔是什么样,以致哪些接纳它来创建全面包车型客车测量试验套件。

前面一个测验金字塔

后面一个测验金字塔是一个前端测量检验套件应该如何创设的结构化表示。

完美的测量检验套件由单元测量试验,一些快速照相测验和局地端到端(e2e卡塔 尔(阿拉伯语:قطر‎测量检验组成。
图片 2

这是测验金字塔的纠正版本,特定于测量试验前端应用程序。

在这里篇小说中,大家将见到各样测验项指标指南。 为此,我们将为示范应用程序创制贰个测量试验套件。

应用

要详细询问前端测量试验金字塔,大家来探视如何测量检验三个 Web 应用。

该采用是四个粗略的 modal 应用。 点击一个按键张开一个 modal ,点击 modal 上的 OK 按键关闭 modal。

图片 3

我们将从基于组件的框架构建利用。 别怀念细节,我们会保持那个(详细卡塔尔的等级。

该利用由八个零器件组成 – 叁个 Button 组件,四个 Modal 组件和二个 App 组件。

我们要写的率先个测量试验是单元测量检验。 在后面一个测量检验金字塔中,超越二分一测量检验都以单元测量检验。

当下Javascript的测量检验工具相当多,可是针对React的测验计策,脸谱推出的ReactJs标配测量试验工具是Jest.Jest的官方网址地址:。我们可以看来Jest官方网址宣称的是:Painless JavaScript Testing。是Twitter用于测量检验服务和React应用程序的JavaScript单元测量检验框架。

在这里地说一下前端开拓的一个脾性是越来越多的会提到顾客分界面,当开辟规模高达一定程度时,大概决定了其复杂度会加倍的增进。

单元测量检验

单元测量检验测量检验的是代码库的单元。

它们一直调用函数或单元,并保管再次来到准确的结果。

在大家的使用中,我们的零件是单元。所以大家将为 Button 和 Modal 编写单元测量检验。未有供给为我们的施用组件编写测验,因为它从未别的逻辑。

单元测量试验会浅渲染零器件,并预知当大家与它们彼当时,它们的行事是不利的。

浅渲染意味着我们渲染组件黄金时代层深度。那样大家得以确认保证只测量检验组件,单元,并不是多少个级其余子组件。

在大家的测量试验中,大家将触及组件上的操作,并检查组件的表现是还是不是与预期风流倜傥致。

咱们不用瞧着代码。可是大家的构件规格会如下所示:

  • 当 displayModal 为 true 时,Modal 有类是活跃的
  • 当 displayModal 为 false 时,Modal 未有类是生动活泼的
  • 当成功按键被点击时,Modal 调用 toggleModal
  • 单击删除按钮时,Modal 会调用 toggleModal
  • 当 button 被点击时,button 调用 toggleModal

大家的测量检验将浅渲染组件,然后检查每生龙活虎项规格的工作。

单元测量试验应该吞噬我们的测量试验套件的多方面有以下多少个原因:

所谓单元测量试验约等于对各样单元进行测量检验,通俗的将平日针没错是函数,类或单个组件,不关乎系统和归总。单元测量检验是软件测量检验的幼功测量试验。Jest首要有以下特征:

甭管在代码的上马搭建进程中,照旧后来难以防止的重商谈匡正bug进程中,平时会陷入逻辑难以梳理、不能左右全局关联的地步。

单元测量试验一点也不慢

几百个单元测量检验套件能在几分钟内运转。

这使得单元测量试验对开辟很有用。 当重构代码时,大家得以改动代码,并在未有间断组件的图景下运作单元测量试验来检查校订。 大家会在几分钟之内知道我们是不是破坏了代码,因为中间三个测量检验会战败。

  1. 适应性:Jest是模块化、可扩展和可配备的。
  2. 沙箱和快捷:Jest虚构化了JavaScript的条件,能模仿浏览器,而且并行实施
  3. 快速照相测量试验:Jest能够对React 树进行快速照相或其余系列化数值快速编写测量检验,提供便捷翻新的客户体验。
  4. 扶植异步代码测量检验:协助promises和async/await
  5. 自动生成静态分析结果:不唯有显得测量试验用例施行结果,也出示语句、分支、函数等覆盖率。

图片 4

单元测验是细颗粒的。

换句话说,他们是非常具体的。

若是五个单元测验失利了,那么那些测量检验会告诉大家它是何等以致为何战败的。

单元测量检验能很好地反省大家的应用程序专业的细节。 它们是支付时最棒的工具,极度是假若你根据测量检验驱动的成本。

只是它们无法测量检验一切。

为了有限支撑大家表现准确的体制,大家还亟需使用快速照相测量检验。

为啥要选用单元测量检验工具

而单元测量检验作为风流洒脱种“提要钩玄、遮风挡雨”的根基花招,为花费提供了“围墙和脚手架”,能够使得的更改那个难点。

快照测量检验

快速照相测验是测量检验你的渲染组件的图片,并将其与组件的早前的图纸展开相比。

用 JavaScript 编写快速照相测量检验的最棒法子是运用 Jest 。

Jest 不是拍照渲染组件的图纸,而是渲染组件标识的快照。 这使得 Jest 快速照相测量检验比古板快速照相测量检验快得多。

要在 Jest 中登记快速照相测验,须要增加如下代码:

const renderedMarkup = renderToString(ModalComponent) expect(renderedMarkup).toMatchSnapshot()

1
2
const renderedMarkup = renderToString(ModalComponent)
expect(renderedMarkup).toMatchSnapshot()

若是您注册三个快速照相,Jest 将顾及别的的所有的事。 每一次运营单元测量试验时,都会另行生成二个快速照相,并将其与事先的快速照相进行比较。

假定代码退换,Jest 会抛出二个八花九裂,并告诫标记已经改变。 然后开拓者能够手动物检疫查没有类被误删的景况。

在上面包车型客车测量检验中,有人从<footer>中去除了 modal-card-foot 类。

图片 5

快速照相测量试验是生机勃勃种检查组件样式或标记的主意。

设若快速照相测量检验通过,大家精通代码改过不会影响组件的显示。

假诺测量检验失利,那么大家清楚确实影响了组件的渲染,并得以手动物检疫查体制是不是准确。

每种组件最少应该三遍快照测量检验。 多少个一流的快速照相测验展现组件的情事,以检讨它科学展现。

以往大家曾经有了单元测验和快速照相测验,是时候看看端到端(e2e卡塔尔国测验。

大家在支付进度中,不应用测量试验工具依然能够团结写代码实行单元测量试验,不过大家的代码存在着相互影响调用关系,在测验进度中大家又愿意使单元相对独立而又能通常运作,就要求我们对被测函数的重视函数和蒙受打开mock,而且在测验数据输入、测验推行和测验结果检查方面存在好多相近性,测量试验工具正是为我们在这里些方面提供了有益。

用作意气风发种精髓的付出和重构手腕,单元测量试验在软件开采领域被周围认同和使用;前端领域也稳步积淀起了增进的测验框架和最好实施。

端到端测量检验

端到端(e2e卡塔 尔(英语:State of Qatar)测量试验是高层测验。

它们施行与我们手动测量检验应用程序时雷同的操作。

在我们的应用程序中,大家有贰个顾客(操作卡塔 尔(英语:State of Qatar)旅程。当客户点击开关时,方式将展开,当她们点击格局中的按键时,形式将关闭。

咱俩得以编写制定三个连贯那大器晚成旅程的端到端测验。测量检验将开发浏览器,导航到网页,并由此种种操作来保管应用程序符合规律运作。

那个测量检验将报告我们,我们的单元正确地协作专业。它使我们莫大自信,该应用程序的关键成效是足以平日干活的。

对 JavaScript 应用程序来讲有二种方法能够编写端到端测量试验。像 test cafe 那样的次序会记录您在浏览器中进行操作并将其当作测验源重放。

还恐怕有相像 nightwatch 的项目,可令你用 JavaScript 编写测验项目。小编会推荐应用相通 nightwatch 的库。拿起来直接用十分轻便,该测量检验运营速度比记录的测验更快。

约等于说,night1qtch 的测量检验依然超慢的。风度翩翩套200个单元测量试验须要花销几分钟的小时,一套200个端到端测量试验仅需求几秒钟时间来运作。

端到端测量检验的另三个主题素材是为难调节和测量试验。当测量试验退步时,很难搜索挫败的缘故,因为测量检验蕴含了太多职能。

有备无患阶段

图片 6

结语

要得力地质衡量试基于前端组件的 Web 应用程序,你要求三种类型的测量检验:单元测量试验,快速照相测验和 e2e 测验。

你应该对每种组件举办多个单元测验,对种种组件举行一遍或四回快速照相测验,以致测量试验链接在联合签字的多个零部件的一遍或两回端到端测量检验。

全体单元测量检验将包蕴大多数测量试验,你将有一点点快速照相测量检验和部分 e2e 测验。

固然您依照前端测量试验金字塔,你就足以应用徘徊花级测验套件创造可爱抚的 Web 应用程序。

你能够在 GitHub 上见到应用程序的快速照相测量试验、单元测量检验和端到端测量试验的以身作则源码库。

1 赞 收藏 评论

图片 7

亟待七个rn项目,这里演示的是本人个人的项目ReactNative-ReduxSaga-TODO

正文将按如下顺序举行验证:

安装jest

  • I. 单元测量试验简要介绍
  • II. React 单元测量检验中用到的工具
  • III. 用测验驱动 React 组件重构
  • IV. React 单元测量试验家常便饭案例

假诺您是用react-native init命令行创建的rn项目,何况你的rn版本在0.38之上,则无需安装了。不老子@楚的话就看一下

单元测验(unit testing卡塔 尔(英语:State of Qatar),是指对软件中的最小可测量试验单元进行自己研究和认证。

package.json文件中是否包涵以下代码:

简单的讲的话,单元正是人工规定的蝇头的被测作用模块。单元测量检验是在软件开拓进度中要开展的最低端其余测验活动,软件的独门单元将要与程序的其它界分相隔开分离的气象下进展测量检验。

 // package.json
 "scripts": {
  "test": "jest"
 },
 "jest": {
  "preset": "react-native"
 }

测量试验框架

测量检验框架的机能是提供一些便于的语法来说述测量试验用例,以至对用例实行分组。

假使未有就设置一下npm i jest --save-dev,并把上述代码增多到package.json文件的相应地点。

断言(assertions)

预见是单元测量试验框架中挑宛城的部分,断言失败会招致测量试验不经过,或报告错误音信。

对此相近的预感,举一些例子如下:

  • 同等性断言 Equality Asserts

    • expect.toEqual
    • expect.not.toEqual
  • 正如性断言 Comparison Asserts

    • expect.toBeGreaterThan
    • expect.toBeLessThanOrEqual
  • 类型性断言 Type Asserts

    • expect.toBeInstanceOf
  • 条件性测量试验 Condition Test

    • expect.toBeTruthy()
    • expect.toBeFalsy()
    • expect.toBeDefined()

如上步骤实现后,简单运维npm run test测量检验一下jest是或不是配备成功。但大家尚无写测量检验用例,终端会打字与印刷no tests found。那时就配置实现了。

断言库

断言库重要提供上述断言的语义化方法,用于对到场测验的值做美妙绝伦的论断。那几个语义化方法会重返测量试验的结果,要么成功、要么退步。家常便饭的断言库有 Should.js, Chai.js 等。

快速照相测验

测量试验用例 test case

为某些特殊目的而编写的风流洒脱组测验输入、实施规范甚至预期结果,以便测量试验有些程序路线或核算是或不是满意某个特定须要。

相通的花样为:

it('should ...', function() { ... expect.toEqual;

写二个构件

测量检验套件 test suite

日常来说把大器晚成组有关的测量检验称为二个测试套件

相仿的花样为:

describe('test ...', function() { it('should ...', function() { ... }); it('should ...', function() { ... }); ...});
import React from 'react';
import {
 Text, View,
} from 'react-native';

import PropTypes from 'prop-types';

const PostArea = ({ title, text, color }) => (
 <View style={{ backgroundColor: '#ddd', height: 100 }}>
  <Text style={{ fontSize: 30 }}>{title}</Text>
  <Text style={{ fontSize: 15, color }}>{text}</Text>
 </View>
);

export default PostArea;

spy

正如 spy 字面包车型大巴情趣同样,大家用这种“间谍”来“监视”函数的调用情形

经过对监视的函数举办打包,能够因而它领悟的明白该函数被调用过四次、传入什么参数、再次回到什么结果,以致是抛出的格外情状。

var spy = sinon.spy(MyComp.prototype, 'componentDidMount');...expect(spy.callCount).toEqual;

在类型根目录下找到__test__文件夹,将来,让大家采纳React的测验渲染器和Jest的快速照相成效来与组件进行相互作用,并抓获呈现的输出并创制二个快速照相文件。

stub

突发性会接纳stub来松手或许直接调换掉后生可畏都部队分代码,来完毕隔绝的指标

一个stub能够利用起码的重视方法来模拟该单元测量检验。举例三个艺术可能依赖另四个情势的实践,而后人对我们来讲是晶莹的。好的做法是使用stub 对它进行隔开替换。那样就贯彻了更标准的单元测验。

var myObj = { prop: function() { return 'foo'; }};sinon.stub(myObj, 'prop').callsFake(function() { return 'bar';});myObj.prop(); // 'bar'
// PostArea_test.js
import 'react-native';
import React from 'react';
import PostArea from '../js/Twitter/PostArea';

import renderer from 'react-test-renderer';

test('renders correctly', () => {
 const tree = renderer.create(<PostArea title="title" text="text" color="red" />).toJSON();
 expect(tree).toMatchSnapshot();
});

mock

mock平日指在测量试验进程中,对于一些不便于构造恐怕不易于得到的对象,用叁个伪造的目的来创立以便测验的测量检验方法

广义的讲,以上的 spy 和 stub 等,以致一些对模块的模仿,对 ajax 再次来到值的效仿、对 timer 的效仿,都叫做 mock 。

下一场在终极运转npm run test或jest。将会输出:

测量检验覆盖率(code coverage)

用于总括测量试验用例对代码的测验情状,生成对应的表格,比如 istanbul 是大面积的测验覆盖率总计工具

PASS  __tests__PostArea_test.js (6.657s)
  √ renders correctly (5553ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written in 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 added, 1 total
Time:        8.198s
Ran all test suites.

Jest

图片 8

分歧于"古板的"的 jasmine / Mocha / Chai 等前端测验框架 -- Jest的利用更简单,何况提供了更加高的集成度、更增加的效果与利益。

Jest 是 推卓越品的一个测量试验框架,相对别的测验框架,其一大特色就是就是置于了常用的测量试验工具,举个例子自带断言、测量试验覆盖率工具,达成了开箱即用。

其余, Jest 的测量试验用例是并行试行的,何况只实行爆发更换的文本所对应的测验,提高了测量检验速度。

编辑单元测验的语法平日非常轻易;对于jest来讲,由于其内部接收了 Jasmine 2 来拓宽测量检验,故其用例语法与 Jasmine 相近。

事实上,只要先记那住四个单词,就足以应付大多数测量试验意况了:

  • describe: 定义一个测量检验套件
  • it:定义二个测验用例
  • expect:断言的论断标准
  • toEqual:断言的可比结实
describe('test ...', function() { it('should ...', function() { expect.toEqual; expect(sth.length).toEqual; expect(sth > oth).toEqual;});

Jest 称得上本人是二个 “Zero configuration testing platform”,只需在 npm scripts里面配备了test: jest,就可以运转npm test,自动识别并测验符合其法则的(日常是 __test__ 目录下的卡塔 尔(阿拉伯语:قطر‎用例文件。

实在运用中,适当的自定义配置一下,会赢得更相符大家的测量试验场景:

//jest.config.jsmodule.exports = { modulePaths: [ "<rootDir>/src/" ], moduleNameMapper: { ".$": '<rootDir>/__test__/NullModule.js' }, collectCoverage: true, coverageDirectory: "<rootDir>/src/", coveragePathIgnorePatterns: [ "<rootDir>/__test__/" ], coverageReporters: ["text"],};

在这里个大致的布局文件中,大家钦点了测量试验的“根目录”,配置了覆盖率(内置的istanbul卡塔 尔(英语:State of Qatar)的片段格式,并将原本在webpack中对体制文件的援用指向了二个空模块,进而跳过了那风流洒脱对测验无关宏旨的环节

//NullModule.jsmodule.exports = {};

除此以外值得黄金年代提的是,由于jest.config.js是多少个会在npm本子中被调用的管见所及JS 文件,而非XXX.json.XXXrc的样式,所以 nodejs 的个别操作都足以开展,譬如引进 fs 实行预处理读写等,灵活性超级高,能够很好的十一分各个项目

鉴于是面向src目录下测量检验其React代码,而且还利用了ES6语法,所以项目下必要存在多少个.babelrc文件:

{ "presets": ["env", "react"]}

如上是主题的安排,而实际是因为webpack能够编写翻译es6的模块,经常将babel中设为{ "modules": false },那个时候的安排为:

//package.json"scripts": { "test": "cross-env NODE_ENV=test jest",},

//.babelrc{ "presets": [ ["es2015", {"modules": false}], "stage-1", "react" ], "plugins": [ "transform-decorators-legacy", 如果对软件测试、接口测试、自动化测试、性能测试、LR脚本开发、面试经验交流。 "react-hot-loader/babel" 感兴趣可以175317069,群内会有不定期的发放免费的资料链接,这些资料都是从各 ], 个技术网站搜集、整理出来的,如果你有好的学习资料可以私聊发我,我会注明出处 "env": { 之后分享给大家。 "test": { "presets": [ "es2015", "stage-1", "react" ], "plugins": [ "transform-decorators-legacy", "react-hot-loader/babel" ] } }}

何况,在test文件夹下会输出三个文件,即为生成的快速照相。

Enzyme

Enzyme 来自于生动活泼在 JavaScript 开源社区的 Airbnb 公司,是对官方测量试验工具库(react-addons-test-utils卡塔尔的卷入。

其生龙活虎单词的London读音为 ['enzaɪm],酵素或酶的野趣,Airbnb 并未给它设计八个Logo,估摸纵然想取用它来注明 React 组件的意思啊。

它模拟了 jQuery 的 API,特别直观而且易于使用和读书,提供了一些特种的接口和几个办法来收缩测验的楷模代码,方便推断、操纵和遍历 React Components 的出口,并且降低了测量试验代码和得以完结代码之间的耦合。

诚如接受 Enzyme 中的 mountshallow 方法,将对象组件转变为叁个 ReactWrapper指标,并在测量检验中调用其种种方式:

import Enzyme,{ mount } from 'enzyme';...describe('test ...', function() { it('should ...', function() { wrapper = mount( <MyComp isDisabled={true} /> ); expect( wrapper.find.exists.toBeTruthy;
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<View
 style={
  Object {
   "backgroundColor": "#ddd",
   "height": 100,
  }
 }
>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "fontSize": 30,
   }
  }
 >
  title
 </Text>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "color": "red",
    "fontSize": 15,
   }
  }
 >
  text
 </Text>
</View>
`;

sinon

图片 9

图中那位“小编牵着马”的实际不是卷帘新秀金身罗汉...其实图中的传说正是人所皆知的“Troy木马”;差不离意思就是希腊(Ελλάδα卡塔尔国人包围了Troy人十多年,久攻不下,心生风度翩翩计,把营盘都撤了,只留下多少个宏大的木马,以至那位被扒光还被打得够呛的人,也正是此处要谈的骨干sinon,由她诈骗Troy人 --- 前边的故事剧情大家就都耳闻则诵了。

之所以那一个命名的测验工具呢,也多亏各类伪装渗透方法的合集,为单元测量试验提供了单身而加多的 spy, stub 和 mock 方法,包容各样测量检验框架。

即使如此 Jest 自个儿也可能有生机勃勃对完毕 spy 等的手法,但 sinon 使用起来更为有益于。

修正源文件

此间不打开斟酌非凡的 “测量试验驱动开辟”(TDD - test driven development) 理论

简单来说的说,把测量检验正向加诸开拓,先写用例再逐级落到实处,正是TDD,那是很好掌握的。

而当大家反过头来,对既有代码补充测验用例,使其测量试验覆盖率不断增高,并在这里进度中更正原有规划,修复潜在难题,同时又确认保证原有接口不收影响,这种 TDD 行为固然没人称之为“测量试验驱动重构”(test driven refactoring),但“重构”那么些定义本人就含有了用测量试验遮风挡雨的意趣,是不可能缺乏的题中之意。

对于一些零器件和集体全数函数等,完备的测量试验也是大器晚成种最佳的施用表明书。

在下三回运转测验的时候,展现的输出将与事先成立的快速照相实行相比。快速照相应该和代码一齐付给。当快速照相测量检验退步的时候,就要求检讨是还是不是有意或无意识的转移。假若是和预期中的变化相近,调用jest -u来覆盖当前的快速照相。

失败-编码-通过 三部曲

由于测量检验结果中,成功的用例会用青蓝代表,而诉讼失败的部分会显示为革命,所以单元测量试验也反复被称为 “Red/Green Testing” 或 “Red/Green Refactoring” , 那也是 TDD 中的经常性步骤:

  1. 累计三个测量检验
  2. 运营具备测量检验,看看新加的这些是或不是败退了;借使能得逞则再次步骤1
  3. 传闻战败报错,有指向的编排或改写代码;这一步的独一目的正是经过测量检验,先不用纠葛细节
  4. 双重运转测量检验;借使能得逞则跳到步骤5,不然重复步骤3
  5. 重构已经通过测量检验的代码,使其更可读、更易维护,且不影响通过测验
  6. 再度步骤1

图片 10图片 11

设若对软件测量检验、接口测量试验、自动化测量试验、品质测量检验、L奥迪Q3脚本开辟、面试阅历交换。感兴趣能够175317069,群内会有不许期的发放无需付费的素材链接,那么些素材都以从种种工夫网址访问、整理出来的,假设你有好的求学资料能够私聊发小编,笔者会注明出处之后享受给我们。

笔者们来纠正一下原先的代码:把第二行<Text>的字号改为14.

解读测量试验覆盖率

图片 12

这就是 jest 内置的 istanbul 输出的覆盖率结果。

故此称为“伊Stan布尔”,是因为土耳其(Turkey卡塔尔地毯世界出名,而地毯是用来"覆盖"的臘‍♀️。

报表中的第2列至第5列,分别对应八个衡量维度:

  • 言辞覆盖率(statement coverage卡塔尔:是或不是每一种语句都实行了
  • 分层覆盖率(branch coverage卡塔 尔(阿拉伯语:قطر‎:是或不是每一个if代码块都施行了
  • 函数覆盖率(function coverage卡塔 尔(英语:State of Qatar):是不是每一个函数都调用了
  • 行覆盖率(line coverage卡塔 尔(英语:State of Qatar):是或不是每后生可畏行都实施了

测量试验结果依附覆盖率被分为“石磨蓝、酸性绿、藤黄”三种,应该视具体景况尽量升高相应模块的测量试验覆盖率。

<Text style={{ fontSize: 14, color }}>{text}</Text>

优化信任 让 React 组件变得 testable

客观编排组件化的 React,并将丰富独立、功效专风流倜傥的机件作为测量试验的单元,将使得单元测量试验变得轻易;

相反,测量检验的长河让我们更易厘清关系,将原来的组件重构或分解成更客观的布局。抽离出的子组件往往也更便于写成stateless的无状态组件,使得品质和关切点尤其优化。

那时候,大家再运转jest。这时候终端将会抛出怪诞,并提议了不当地方

通晓钦命 PropTypes

对此有个别以前定义并不清晰的机件,能够统朝气蓬勃引进 prop-types,分明组件可选择的props;一方面能够在付出/编写翻译进程中任何时间任何地方发掘错误,其余也能够在集体中其它成员引用组件时变成三个明显的列表。

图片 13

用例的预管理或后管理

可以用beforeEachafterEach做一些联合的预置和善后事业,在各个用例的先头和以往都会自动调用:

describe('test components/Comp', function() { let wrapper; let spy; beforeEach(function() { jest.useFakeTimers(); spy = sinon.spy(Comp.prototype, 'componentDidMount'); }); afterEach(function() { jest.useRealTimers(); wrapper && wrapper.unmount(); didMountSpy.restore(); didMountSpy = null; }); it('应该正确显示基本结构', function() { wrapper = mount( <Comp ... /> ); expect(wrapper.find.text.toEqual; }); ...});

因为这段代码是大家有意识改的,这个时候运行jest -u,快速照相被掩没。再履行jest则不会报错了~

调用组件的“私有”方法

对此有个别零器件中,若是希望在测量检验阶段调用到其某个内部方法,又不想对原组件改变过大的,能够用instance()获取组件类实例:

it('应该正确获取组件类实例', function() { var wrapper = mount( <MultiSelect name="HELLOKITTY" placeholder="select sth..." /> ); var wi = wrapper.instance(); expect( wi.props.name ).toEqual( "HELLOKITTY" ); expect( wi.state.open ).toEqual;});

以上正是本文的全体内容,希望对我们的学习抱有利于,也指望大家多都赐教脚本之家。

异步操作的测量试验

作为UI组件,React组件中一些操作须求延时实行,诸如onscrolloninput那类高频触发动作,要求做函数防抖或节流,比方常用的 lodash 的 debounce 等。

所谓的异步操作,在不考虑和 ajax 整合的融会测量检验的气象下,平日都以指此类操作,只用 setTimeout 是丰裕的,供给搭配 done 函数使用:

//组件中const Comp = =>( <input type="text" onChange={ debounce(props.onSearch, 500) } />);

//单元测试中it('应该在输入时触发回调', function { var spy = jest.fn(); var wrapper = mount( <Comp onChange={ spy } /> ); wrapper.find('#searchIpt').simulate; setTimeout=>{ expect.toHaveBeenCalledTimes; done(); }, 550);});

您大概感兴趣的稿子:

  • 浅谈React组件之性质优化
  • React Native 图片查看组件的格局
  • React组件中的this的切实可行应用
  • React 组件转 Vue 组件的通令写法
  • 浅谈React中的成分、组件、实例和节点
  • 选拔angular、react和vue达成平等的面试题组件
  • React组件refs的施用安详严整
  • 品尝本身入手用react来写三个分页组件(小结)
  • 浅谈react受控组件与非受控组件(小结)
  • 详明使用React实行零部件库开采
  • 浅谈React中组件间抽象
  • React 高阶组件入门介绍
  • 编排React组件项目试行解析

意气风发部分大局和单例的模拟

有的模块中可能耦合了对 window.xxx 那类全局对象的援引,而完全去实例化这几个目的恐怕又牵涉出超级多其余的主题素材,难以开展;此时得以见招拆招,只模拟一个最小化的大局对象,保险测验的实行:

//fakeAppFacade.jsvar facade = { router: { current: function() { return {name:null, params:null}; } }, appData: { symbol: "&yen;" }};window._appFacade = facade;module.exports = facade;

//测试套件中import fakeFak from '../fakeAppFacade';

其它举个例子 LocalStroage 这类对象,测量检验端景况中尚无原生扶植,也足以轻巧模拟一下:

//fakeStorage.jsvar _util = {};var fakeStorage = { "set": function { _util['_fakeSave_' k] = v; }, "get": function { return _util['_fakeSave_' k] || null; }, "remove": function { delete _util['_fakeSave_' k]; }, "has": function { return _util.hasOwnProperty('_fakeSave_' k); }};module.exports = fakeStorage;

棘手的 react-bootstrap/modal

在二个品类中用到了 react-bootstrap 分界面库,测验一个构件时,由于包蕴了其 Modal 模态弹窗,而弹窗组件是暗中认可渲染到 document 中的,引致难以用经常的 find 方法等得到

斩草除根的艺术是模仿一个渲染到容器组件原处的常备组件:

//FakeReactBootstrapModal.jsimport React, {Component} from 'react';class FakeReactBootstrapModal extends Component { constructor { super; } render() { //原生的 react-bootstrap/Modal 无法被 enzyme 测试 const { show, bgSize, dialogClassName, children } = this.props; return show ? <div className={ `fakeModal ${bgSize} ${dialogClassName}` }>{children}</div> : null; }}export default FakeReactBootstrapModal;

还要在组件渲染时,参与决断逻辑,使之能够帮衬自定义的类代替 Modal 类:

//ModalComp.jsimport { Modal } from 'react-bootstrap';...render() { const MyModal = this._modalClass || Modal; return (<MyModal bsSize={props.mode>1 ? "large" : "middle"} dialogClassName="custom-modal"> ... </MyModal>;}

而测量检验套件中,实现叁个测验专项使用的子类:

//myModal.spec.jsimport ModalComp from 'components/ModalComp';class TestModalComp extends ModalComp { constructor { super; this._modalClass = FakeReactBootstrapModal; }}

这么测量试验就能够顺遂举行,跳过了并不重大的 UI 效果,而各个逻辑都能被隐瞒了

模拟fetch请求

如若对软件测验、接口测量试验、自动化测验、品质测验、LR脚本开垦、面试经历调换。感兴趣能够175317069,群内会有不定期的发放免费的资料链接,这几个材质都以从各种技能网址访问、收拾出来的,假使您有好的读书资料能够私聊发笔者,作者会注解出处之后享受给我们。

在单元测验的经过中,难免遭遇一些内需远间距诉求数据的动静,比方组件获取开始化数据、提交变化数据等。

要潜心这种测量试验的目标或许考察组件本人的显现,而非注重关心实际远程数据的三合风度翩翩测验,所以大家没有必要真实的伸手,可以轻便的依葫芦画瓢一些号令的情景。

sinon 中有大器晚成对仿照 XMLHttpRequest 乞求的格局, jest 也可以有部分第三方的库化解 fetch 的测量检验;

在我们的品类中,依照实际的用法,自个儿完结贰个类来效仿乞请的响应:

//FakeFetch.jsimport { noop } from 'lodash';const fakeFetch = (jsonResult, isSuccess=true, callback=noop)=>{ const blob = new Blob( [JSON.stringify(jsonResult)], {type : 'application/json'} ); return =>{ console.log('FAKE FETCH', args); callback.call(null, args); return isSuccess ? Promise.resolve( new Response( blob, {status:200, statusText:"OK"} ) ) : Promise.reject( new Response( blob, {status:400, statusText:"Bad Request"} ) ) }};export default fakeFetch;

//Comp.spec.jsimport fakeFetch from '../FakeFetch';const _fc = window.fetch; //缓存“真实的”fetchdescribe('test components/Comp', function() { let wrapper; afterEach(function() { wrapper && wrapper.unmount(); window.fetch = _fc; //恢复 }); it("应该在远程请求时响应onRemoteData", =>{ window.fetch = fakeFetch({ brand: "GoBelieve", tree: { node: '总部', children: null } }); let spy = jest.fn(); wrapper = mount( <Comp onRemoteData={ spy } /> ); jest.useRealTimers(); _clickTrigger(); //此时应该发起请求 setTimeout=>{ expect(wrapper.html.toMatch; expect.toHaveBeenCalledTimes; done(); }, 500); });}); 

单元测量检验作为意气风发种精粹的支付和重构花招,在软件开辟领域被广大承认和运用;前端领域也日趋积淀起了增加的测量试验框架和形式。

单元测试可感觉大家的支付和体贴提供幼功保障,使大家在思绪清晰、心中有底的气象下产生对代码的搭建和重构;

须求留意的是,世上未有手到回春的良药,单元测验也无须是万金油,秉持严慎认真担任的情态本事从根本上保障大家做事的进行。

本文由星彩网app下载发布于前端技术,转载请注明出处:组件进行单元测量试验,你要求精晓的前端测验

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。