澳门威利斯人_威利斯人娱乐「手机版」

来自 网络资讯 2019-05-03 23:21 的文章
当前位置: 澳门威利斯人 > 网络资讯 > 正文

React开发入门教程,前端常用单元测试

近年的1段时间一向在搞TypeScript,1个巨硬出品、赋予JavaScript语言静态类型和编写翻译的语言。
首先个完全采取TypeScript重构的纯Node.js品种已经上线并稳固运营了。
其次个左右端的项目近期也在重构中,关于前端基于webpackTypeScript套路在此以前也有关系过:TypeScript在react项目中的施行。

基于Nodejs生态圈的TypeScript React开采入门教程

 

前言

单元测试,一句话来讲正是才能职员的白盒测试(程序测试)。为了减小产品的开辟周期时间以及早先时期的修补代价,渐渐供给技巧人士要在支付进度中梳理清晰自个儿开垦作用逻辑,编写相对应的单元测试程序代码,用于对自个儿思索逻辑完结的三个校验测试。

前端开辟人士编写制定单元测试的工具和框架有几个主流的,但寻觅了多数网址,开掘并未有哪位网址系统地讲述从零初步如何搭建前端的2个工具 框架自动化单元测试情状直至能够加多自文件可测试使用。所以,依据自个儿搭建的片段经历,我总括了1部分手续,搭建完毕之后只须求保留一份,能够在里面增多不相同的自定义js文件,都能够运作调整台命令针对js文件举行单元测试。(笔者的情状搭建是在window系统下的)

唯独那么些做完以往也总感到缺了点儿什么 (未有尽兴)

1. 概述

本学科目的在于为基于Nodejs npm生态圈的前端程序开采提供入门讲明。

  1. ### Nodejs是什么

Nodejs是1个高品质JavaScript脚本运营情况,内部基于Chrome V8脚本引擎。它一定于把在浏览器中实行JavaScript脚本的成效收抽出来,作为二个独自的主次,可在桌面端命令行等条件中采取。

  1. ### NPM是什么

NPM是nodejs包处理器(nodejs package manager),近日已为满世界最大的开源脚本旅馆。它管理着众多的脚本程序库。它也提供了3个可在nodejs意况中施行的工具包,为咱们提供从旅舍中下载类库,以及进步和卸载类库的效益。

一、测试框架/工具

  • 测试管理工科具: karma
  • 测试框架: mocha/jasmine(本文讲述的是mocha)
  • 断言库: chai
  • 测试浏览器: Phantomjs
  • 测试覆盖率: karma-coverage

图片 1
毋庸置疑,还是有六分之壹的JavaScript代码存在于项目中,作为2个TypeScript的言传身教项目,表现的很不纯粹。
就此有未有希望将这么些JavaScript代码也换到TypeScript呢?
答案自然是局地,首先要求分析那个代码都以何许:

1. 生态圈

可在npm中找到的类库以及工具备为数不少。

 

图片 2

 

可是大家对这么些工具和类库的精选上理应取舍。本学科使用了以下工具或类库。

 

图片 3

 

二、营造基本的原生js单元测试

一. 创办项目标package.json
创立贰个空项目文件夹,如mytest,在项目根目录下实施调整台命令:npm init

npm init

日后依据提醒进行创办基础的package.json文件音讯就可以(笔者都以直接按Enter):

初始化package.json文件.png

2. 计划项目标package.json
个别实行以下调整台命令,将要求的工具/蒙受设置到项目中,安装到位后pakeage.json的devDependencies
中相应更换出现相关安装工具注重。

实施的调控台命令:

npm install --save-dev karma

npm install --save-dev karma-mocha

npm install --save-dev karma-chai

npm install --save-dev karma-phantomjs-launcher

npm install --save-dev karma-coverage

npm install --save-dev mocha chai

负有工具/情况设置成功后,package.json中是devDependencies那样的:

"devDependencies": {
    "chai": "^3.5.0",
    "karma": "^1.4.1",
    "karma-chai": "^0.1.0",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "mocha": "^3.2.0"
  }

3. 开端化Karma配置文件
在项目标根目录运营karma init,初叶化配置成功后会在根目录下生成karma.conf.js文件。

karma init

依据截图进行开首化配置:

karma开端化配置.png

意味着配置利用mocha框架以及PhantomJS无页面浏览器实行前端js代码的单元测试,配置必要被测试的代码和测试代码放在src/和test/文件夹中。

补偿表明:
在品种下安装完全部片段情状之后,根目录下运作karma init命令行或许仍会报错(karma init为无用命令等)
消除方案:在本电脑全局下安装karma

npm i karma -g

四. 修改Karma基本配备
那会儿开头化的karma.conf.js只是最中央的karma配置,大家还需求手动修改部分位置。

  • 在内部的frameworks1项中扩展chai:
frameworks: ['mocha','chai'],
  • 然后在config.set({})中添加:
plupins:[
        'karma-mocha',
        'karma-chai',
        'karma-phantomjs-launcher'
    ]

5. 针对性覆盖率修改Karma配置文件

  • 在preprocessors和reporters中添加:
preprocessors: {
        'src/*.js':['coverage']
    },

    reporters: ['progress','coverage'],
  • 然后在config.set({})中的plugins中添加:
plugins:[
        'karma-mocha',
        'karma-chai',
        'karma-phantomjs-launcher',
        'karma-coverage'
    ]

6. 初步编写制定测试代码
通过上述手续,基本上单元测试的工具/情形正视已设置到位,能够初叶举行源代码的编辑测试。
在上文的开首化Karma配置时,已经告知Karma,必要被测试的代码和测试代码放在src/和test/文件夹中,所以大家相应在src/文件夹下提供要被测试的代码,在test/文件夹下提供测试代码:

在src/文件夹中新建index.js文件,在这些文件中增加多少个分外简单的函数:

function isNum(num){
    return typeof num === "number"
}
function isString(str){
    return typeof str === "string"
}
function isLarge10(num){
    return num > 10;
}

下一场在test/文件夹中新建index.test.js文件。经常,测试脚本与所要测试的源码脚
本同名,不过后缀名叫.test.js(表示测试)大概.spec.js(表示原则)。在该公文
中初露编写制定测试代码:

describe('index.js的测试',function(){
    it('1应该是数字',function(){
        //expect(isNum(1)).to.be.true
        isNum(1).should.equal(true);
    })
    it('"1"应该是字符',function(){
        //expect(isString("1")).to.be.true
        isString("1").should.equal(true);
    })
    it('11大于10',function(){
        //expect(isLarge10(11)).to.be.true
        isLarge10(11).should.equal(true);
    })
})

编写测试文件时,describe、it皆以由mocha提供的测试用api:

describe块成为“测试套件”,表示1组有关的测试。他是一个函数,第贰个参数是测试套件的名号,第一个参数是切实可行要施行的测试函数;

it块称为测试用例,表示二个独门的测试,即测试的矮小单位。他也是叁个函数,第叁个参数表示测试用例的称号,第3个参数表示具体供给试行的断言函数;

7. 运维单元测试
被测试代码和测试代码编写完成后,在档案的次序根目录输入:karma start

karma start

要是测试不经过,测试套件和测试用例的叙述都会在命令行输出,告诉你哪个地方测试退步了。并且这时你改改大4代码,单元测试便会在你保存后活动运营。
你的项目中便会多出贰个coverage文件夹,文件夹中服从浏览器分了覆盖率总计结果,我们运用的是PhantomJs,自然会有五个PhantomJs*文本夹,用浏览器展开index.html便可查阅测试覆盖率。

(补充表达:在作者设置局地单元测试碰到依赖后,会存在实施karma start命令时报错的气象,所以大概新手朋友们在此步骤试行时也会油然则生报错,小编分析是因为唯有karma在全局安装了,而其余的兼具条件都以在等级次序目录下张开部分安装的,此时运营karma start使用全局意况karma去实行命令就能发掘全局中并未有别的模块而致使报错,基本上报错类型包涵提示mocha模块出错,加载不了coverage模块,加载不了chai模块等等,近年来自身找到的消除方案便是对于报错的工具/情况举行全局实行安装,如全局安装mocha实行调控台命令:

npm install mocha -g

消除思路就是贫乏什么就对怎么样进展全局安装。

好了,以上就是本人本身在安装使用前端单元测试工具和框架时部分步骤的简要计算,依据那一个手续可以着力成立三个原生js文件的测试情形包,之后只要求把要测试的js源文件放进src文件夹,把对应源文件的亲善依据chai断言库编写的单元测试用例文件放进test文件夹中,再施行karma start命令就足以测试本人的js逻辑。

  • Webpack装进时的计划文件
  • 一些回顾的测试用例(使用的mocha和chai)

一. 条件搭建

1.  ### 安装Nodejs&npm 

我们率先从nodejs官方网址nodejs.org 下载nodejs安装包,要选用与和睦系统相应版本(x86/x64)。

图片 4

设置时协同Next。

在选拔安装组件时,大家能见到选项里有 nodejs运转中央这么些是必须的,因为你须求它去运营脚本程序。

当然安装包里也合并了npm,大家须要它来下载和管理类库和工具包,这五个我们都急需。

Add to path 那一项是将npm包路线加到系统path中,那项也是很重视的,往往大家使用npm安装了一个工具后,我们须要在cmd命令行中央直机关接调用这么些工具,那那一个选项就要求了。

图片 5

在设置到位后,大家可以作轻便测试,在cmd中敲入node进入nodejs运维条件。

下一场输入一段脚本,查看执市价况。

  1. ### 使用VS Code

此间大家选择二个简练的代码编辑器VS Code,而非使用VS等功用强大的IDE。大家抛开VS那一个壮大IDE的效率只为能越来越一语道破的刺探在前端开采所需的各类工具的创设机制。大家从vs code官方网站下载好安装包,安装之后,直接张开。

图片 6

咱俩新建1个空的品类文件夹,在VS CODE中开拓,大家能够使用神速键ctrl ~ 来快速在本目录中开垦cmd命令行。

图片 7

  1. ### 使用NPM

咱俩在指令行中敲入npm init 命令。此命令能够在类型目录中创立npm包配置文件package.json,此文件定义了这些类型所须要的各样模块,以及项目标布署新闻(例如名称、版本、许可证等元数据)。

图片 8

 

咱俩选用默许设置就足以,最终在类型根目录会生成如下格式的配备文件。

 

图片 9

如上配置为我们在改动的骨干配置文件上做了1部分补充。

上面大家来解说package.json中常用配置字段的用处:

 

  • Main:main字段钦赐了品种加载的进口文件。假诺你要从表面把大家项目作为二个模块类库引用,则率先个实践的将会是进口文件。暗中同意的进口文件名叫index.js。
  • Scripts:scripts字段配置了能够用过npm run xx来运营的台本命令。比方地点配置了一条tsc 的吩咐,大家能够调用 npm run tsc 来试行那条命令。Start命令是scripts中系统内置的一条命令,意思是大家能够经过调用npm start来运行大家的档案的次序。

  • Dependencies:dependencies字段钦点了品种运营时所依赖的模块。

  • devDependencies:devDependencies字段钦赐了体系支出时所急需正视的模块,它与dependencies字段都指向了一个类库和工具。改类库或工具包蕴名称和呼应的本子。

 

因为systemjs和react是大家须要在等级次序运作时所须求选取的类库,所以我们把他放到dependencies中。

因为lite-server和concurrently是我们在付出时所必要接纳的工具,所以我们把他放到devDependencies中。Lite-server是二个在支付时的轻量级HTTP服务器(也正是IIS提供的效劳),concurrently是一个得以并行施行package.json scripts里面脚本的功能库。

 

以往项目配置已经有了,要借助的类库和本子也一度加到配置文件了。大家明天须要将大家依赖的类库或工具下载安装到大家项目中应用。

Npm install 命令实践时会自动安装大家package.json文件中定义的信赖项。从此处设置的软件包会以地点格局的来安装,也正是说安装的借助包会自动放于本地品种根目录下的node_modules文件夹中。

 

Npm install 一遍性安装好我们package.json配置的类库和工具后,大家还索要动用typescript和typings那七个工具。而小编辈今日急需将那八个工具安装到全局目录中。

大家在命令行中运营:

npm install –g typescript

npm install –g typings

npm会将那四个软件包安装到全局目录中,npm安装分七个职位:壹.全局目录参数中加 -g,二.本地目录中

设置到位后我们就能够动用typescript软件库提供的tsc命令,将ts代码编写翻译成js,使用typings来下载那多少个从没使用ts语言编写的公家类库的d.ts定义文件。

  1. ### 更换NPM仓库源

因为NPM在国外和大家国内网络有关的缘由,恐怕会在npm install 从饭店中下载包速度过慢。所以大家得以把npm的旅社源切到大家国内的服务器中,大家能够经过上边包车型客车通令举办切换。

npm config set registry

 

接头了是哪些地点还在运用JavaScript,那件事情就变得很好化解了,从营造筑工程具(Webpack)早先,每一个击破,将这几个全部交替为TypeScript

1. React和TypeScript

1.  #### React介绍 

React是三个前端mvvm框架,它能够使前端开拓越发组件化,越发方便前端控件的爱抚和集体。

 

React与Npm并从未必然联系。它只是将自身的代码包在npm酒馆发布了一份,方便用户通过npm实行下载安装,当然也是足以被此外能够运转在nodejs遭逢中的软件包重视使用的。

 

React几大机制:

  • 组件化

    React提倡以组件的思维来开垦前端UI,通过将UI的一壹部分拆分成组件,使用时将其组装,那样职分单1作用清晰,特别有益代码重用和早先时期的保养。

  • 虚拟DOM

    为了达到对DOM调整的高品质和跨平台湾特务性,React在HTML真实DOM上加码了壹层虚拟DOM层。大家在对DOM进行操作时,操作会在编造DOM层中先进行比对计算,找到真正必要修改的DOM成分,再对实在的HTML DOM举行改换,那样可以小幅度收缩对真正DOM成分修改的多少和次数,从而巩固品质。

![](https://images2015.cnblogs.com/blog/86219/201612/86219-20161212101813745-959605954.png) 
  • 事态驱动,单向数据绑定
React在对DOM元素的修改操作,总是由组件的状态改变来驱动的。当组件内的状态数据修改时,React会自动计算需要修改的DOM来进行修改。并且数据绑定是单向的,也就是说当用户修改了页面DOM元素的值,并不会直接反向的影响到组件内的状态数据,只有当在这个DOM元素上绑定了相应的事件,通过这个事件来触发状态的修改,才可以更新组件内的状态值。
  • JSX语法

    JSX语法是1种语法糖,它同意直接将HTML结构代码写在javascript脚本中,将html代码和javascript代码混合写在一同。如下:

![](https://images2015.cnblogs.com/blog/86219/201612/86219-20161212101814198-685789404.png) 

实际它最终通过编,译之后得到的仍然是javascript脚本代码。如下:


 

![](https://images2015.cnblogs.com/blog/86219/201612/86219-20161212101814495-186865581.png) 
  1. #### TypeScript介绍

TypeSciprt是一门脚本语言,它终归Javascript的巩固版,它扩大Javascript的类库,增添了面向对象特性。当然它最大的表征是兼容Javascript,它能够将团结的代码编译成Javascript代码。

 

大家将它配备为支付时工具放于我们项目中应用,其主要目的是能够透过它的tsc命令将typescript编写翻译为javascript代码。

 

TypeScript对Javascript的1部分恢宏:

  • Class 类

  • Enum 枚举

  • Interface 接口

  • <T> 泛型
  • Namespace 命名空间

 

譬如说大家开荒三个类,并应用了继续,如下:

图片 10

  1. #### 起首利用

我们以往将两边结合使用,大家开拓2个简单易行一点零部件,命名叫:HelloComponent

 

先是我们创建HelloComponent.tsx 文件放于大家项目下的scripts目录中。Tsx文件表明文件之中为运用了jsx语法的typescript脚本代码文件。

 

然后我们将下边的代码加入在这之中:

图片 11最后在浏览器中的实施效果如下:

图片 12

 

大家对那段代码作1个光景解说:

 

首先我们通过import 来引用react类库

 

下一场我们编辑三个协调的组件HelloComponent,此组件要求后续与React.Component 组件类。此类为三个泛型类<TP,TS>,泛型参数中须求传入四个连串:TP为那么些组件的性质类型接口,TS为那些组件的动静类型接口。TP定义了表面调用组件时可感到组件传入的个性。TS定义了组件内部情状将具有怎么着字段。

 

大家在reder方法中编辑大家组件须求体现的html成分代码,大家在input的value和span的浮现文本中都绑定了this.state.text字段,这里当state.text做过退换后,那七个地点显得的剧情也会随着开始展览更改。

 

最近难点是大家怎样修改大家的情形数据。这里我们率先在组件的构造函数里起首化了私下认可的景况。State.text使用了表面传入组件属性initText值。其次我们在input中绑定了onChange事件,当此事件触发时,大家也会修改state.text为input控件的value值。那样就达成了对state.text的改造,也就落成了分界面彰显的修改功能。

 

图片 13

 

TypeScript在编写翻译时大家要求对它进行局地布局,大家在等级次序根目录中加进tsconfig.json文件,在文件中插手以下配置代码:

图片 14

咱俩概略疏解一下此布局中各字段的意义:

  • compileOnSave:启用在保留ts、tsx文件时即编写翻译ts到js
  • target:ts编写翻译到js的对象版本,大家一般用es5,方便做浏览器包容
  • module:ts编写翻译到js所用的模块方式,模块格局有多样(commonjs、amd等),大家这里运用nodejs的模块社团办公室法 commonjs

  • moduleResolution:ts查找模块所用的不二秘技,有node和暗许查找方法。配置为node意思为TypeScript可以从node_modules中查找ts模块。

  • allowJs:是不是帮助识别js为ts模块
  • jsx:钦命当使用jsx语法编写的typescript文件tsx编写翻译到js时,所采用的章程,这里大家挑选react,因为我们需求将jsx语法编写翻译成react javascript代码。

 

好了,typescript的计划文件大家曾经配置OK,我们在指令行中央直机关接实施tsc命令将tsx编写翻译成js代码文件。

图片 15

 

在编写翻译时,大家开掘编写翻译出错,提醒找不到模块react。

因为react不是行使ts语言编写的,而且它也并从未提供d.ts定义描述文件,所以ts无法辨识它为模块。这里大家要求为它填补2个d.ts文件,让ts能够辨识它。

上边就轮到typings工具上场了。Typings工具的目的便是为那多少个从没接纳ts语言编写的共用类库下载相应的d.ts定义文件。它有多少个数据源,能够从各个地点找找大家需求类库的d.ts文件,并下载。

 

图片 16我们经过typings search react命令能观察与react相关的d.ts文件在众八个数据源都存在。这里我们事先从dt数据源中下载就可以。

 

我们在命令行中敲入:

图片 17此命令typings会从 dt 数据源中安装react到大家项目中。

--global内定那些react.dt.s将作为大家项目全局定义来引用,将设置到花色根目录typingsglobals目录中。

--save指虞升卿装后,会将起记录到typings的配置文件,typings.json中。大家在装置落成后,会看到typings为大家在档期的顺序根目录自动生成了此文件。

 

React的概念文件大家已安装落成,未来大家再来施行tsc的编写翻译命令。此番编写翻译看到未有不当提醒,并在HelloComponent.tsx当前目录中生成了HelloComponent.js文件。

Webpack 的 TypeScript 达成版本

在这8102年,很幸福,Webpack官方已经支撑了TypeScript编辑配置文件,文书档案地址。
除了TypeScript以外还帮忙JSXCoffeeScript的解释器,在这就大体它们的存在了

一. 加载运维

React的机件大家已支付完成,以后大家要求将它放于Html中显得出来。而在动用HelloComponent.js时,大家能够有多样引用它的抉择。大家并未有直接行使将其通过<script>标签放于html中的格局,而是利用通过systemjs模块能源加载器来加载它。

 

原因有以下几点:

  • 在于大家在ts配置了是以commonjs模块情势变通的js,所以将其平素放到通过<script>标签引用到html上将不可能识别require等办法。
  • Systemjs那类的模块加载器,能够按需加载咱们所需的模块,而且会很好的消除模块之间的重视关系。

 

第一大家增添index.html到我们的项目根目录中,代码如下:

图片 18咱俩在html直接运用<script>标签引用的js文件唯有system.js和system.config.js。大家在应用system.js时,需求经过一些安顿让它了然大家项目标组成等。

System.config.js的配置代码如下:

图片 19

大家在中间安排了大家应用的react和react-dom库,以及require方法。配置中各选项的详实表达须求到systemjs官方网址文书档案中查看,大家在这里不做具体讲明。

 

好了现行反革命全方位就绪,大家在命令行中推行npm start。由于大家在package.json的scripts中布署了之类脚本命令。

图片 20

据此npm 会为大家并行推行tsc –w(此命令为ts能够拉开监察和控制项目中的全体ts文件,借使有改造,将会重复编写翻译) 和 lite http服务器。

 

Lite http服务器运营后,会监听三个端口,并在我们浏览器自动张开二个页面。

图片 21

 

页面中显示的机件就是咱们付出的HelloComponent组件。以后大家得以痛快的启幕编写制定更多的组件,并创设使用他们吧。

 

本课程为依附nodejs生态情状下的前端开垦react typescript提供了三个入门基础教程,教程中涉及到的react,typescript,systemjs等知识,教程中只是对准做了三个大致的概述。大家在其后的支付中,还必要经过种种门路尤其深远领会它们。

依附的装置

第1是要安装TypeScript相关的一套各样重视,包含解释器及该语言的宗旨模块:

npm install -D typescript ts-node

typescript为这几个语言的大旨模块,ts-node用以直接推行.ts文本,而无需像tsc那么会编写翻译输出.js文件。

ts-node helloworld.ts

因为要在TypeScript意况下利用Webpack连带的东东,所以要设置相应的types
也就是Webpack所对应的那个*.d.ts,用来告诉TypeScript那是个如何目标,提供什么格局。

npm i -D @types/webpack

一部分常用的pLugin都会有对应的@types文件,能够总结的经过npm info @types/XXX来检查是或不是存在

比如是有的小众的plugin,则大概须求团结创设对应的d.ts文件,举例大家一贯在用的qiniu-webpack-plugin,那一个就从未相应的@types包的,所以就自个儿创制三个空文件来告诉TypeScript那是个吗:

declare module 'qiniu-webpack-plugin' // 就一个简单的定义即可

// 如果还有其他的包,直接放到同一个文件就行了
// 文件名也没有要求,保证是 d.ts 结尾即可

停放的职位没有啥范围,随意丢,一般提议放权types文本夹下

最终便是.ts文件在实践时的壹对配备文件设置。
用来推行Webpack.ts文件对tsconfig.json有部分小小的须求。
compilerOptions下的target慎选必须是es5,这一个象征着输出的格式。
以及module渴求采取commonjs

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true
  }
}

但一般来说,试行Webpack的同级目录都早就存在了tsconfig.json,用于实际的前端代码编写翻译,很恐怕三个布局文件的参数并不均等。
只要因为要采纳Webpack去修改真正的代码配置参数明显是不可取的。
因此大家就可以用到那般三个包,用来改造ts-node施行时所依赖的安插文件:tsconfig-paths

Readme中开掘了那样的传道:If process.env.TS_NODE_PROJECT is set it will be used to resolved tsconfig.json
Webpack的文书档案中一样也涉及了那句,所以那是二个相称的法子,在指令运转时钦点1个门道,在不影响原本配置的景色下创办贰个供Webpack包裹时使用的布局。

  1. 将上述的配置文件改名叫别的名称,Webpack文书档案示例中为tsconfig-for-webpack-config.json,这里就径直沿用了
  2. 下一场加多npm script如下
{
  "scripts": {
    "build": "TS_NODE_PROJECT=tsconfig-for-webpack-config.json webpack --config configs.ts"
  }
}

本文由澳门威利斯人发布于网络资讯,转载请注明出处:React开发入门教程,前端常用单元测试

关键词: 澳门威利斯人 Web前端之路 WEB 前端 让前端飞