Javascript单元测试的基础(Basics of Unit Testing in JavaScript)

本文介绍JavaScript单元测试的基础概念,解释了单元测试的目的及如何通过简单的断言函数验证代码的正确性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原文地址:http://tech.pro/blog/1632/basics-of-unit-testing-in-javascript


当你写代码的时候,无论是JS代码或其他程序语言是否正常工作是一件你需要关注的事情。你写了一个代码片段,想让它能像预想的一样工作,没有任何差别,这就是为什么你要写那段代码。想象一下,当你已经写了差不多几千行代码时,你能保证它能够正常工作吗?答案是不一定吧。

单元测试能够让你写的代码按照你之前预想的方式工作。


那么,究竟什么是单元测试?

维基百科上对于单元测试的定义是酱紫的:

单元测试是针对个别单元、一个或多个关联了控件数据的计算机程序模块、使用程序或执行程序进行正确性检验的测试方法。

我不知道你是否看懂了,反正我是没懂。这就是为什么我有我自己的对于它的定义:

单元测试是一个可以用它来对代码块进行执行结果验证的方法。

到现在,我希望你能清楚单元测试是什么,同时知道它对于写代码是多么有用!


太多关于单元测试的定义了,到底怎么做

好吧,言归正传——怎么进行单元测试呢?


我们到底应该测试什么?

对于Javascript来说,我们应该测试的是操作结束后是否返回期望的结果。经常测试的内容如下:

1.方法的返回值

2.DOM节点的属性

3.局部变量的值

事实上,Js中的所有内容都能被测试,而且很简单。


怎么测试?

目前已经有很多测试的方法,甚至已经有一些框架像Jasmine和Quint,他们都可以让测试更简单。但至于现在,让文章更加简单(我是原生javascript的脑残粉),我将不会使用单元测试框架。我会写一个名叫”assert”的简单方法作为替代,它将在接下来的文章中被用到。

/**

 * Simple assertionfunction

 *

 * @param {Any} objThe first object

 * @param {Any} anoThe object to test against

 * @return {Bool}If obj is exactly equal to ano

 */

function assert (obj, ano) {

  return obj === ano;

}

多么简单的一个方法,是不?我还为你写了文档,以便你能轻易的理解它。那么现在我们已经有了干活的主要工具,让我们把它用起来吧。


测试代码

为了让文章更简单(其实是我懒得写),我将测试一些超简单的代码。我不会做有关DOM操作的测试,虽然那很简单(为节点设置属性,检查它是否设置成功),仅仅是因为我不想在此文中解决浏览相关的问题。


首先,在测试之前,我将写点代码。但写啥呢?写一个简单的add方法,它能实现两个数字相加。在此之前我将对这个方法的执行做一些预期:

1.它将接受两个输入参数,将它们相加,返回结果

2.如果输入参数数量不正确,它应该报错

代码真的很简单,相信我!代码如下:

/**
 * Add two numbers
 * 
 * @param {Number} n1 The first number
 * @param {Number} n2 The second number
 * @return {Number} Sum of n1 and n2
 */
function add (n1, n2) {
  // arguments is an array of arguments passed
  // So, arguments.length is the number of arguments
  if (arguments.length !== 2) {
    throw new Error ();
  }

  return n1 + n2;
}
现在,我们需要测试它是否会按预期来执行。

assert(add(1, 4), 5) // true
assert(add(45,34,80)) // false

恭喜!你已经学会了如何对你的代码进行单元测试。我已经讲述了JS中关于单元测试的大部分基础的东西,但仍有很多内容需要学习。但这篇文章仅仅是基础!

我为各位读者准备了一些作业:

1.写一个方法,可以判断一个值小于另一个值。同样的,写另一个方法,判断该值大于另一个值

2.写一些方法来判断,一个对象是否是

   Ø  Object

   Ø  String

   Ø  Function

   Ø  Boolean


感谢您费神阅读此渣文。千万别忘了提交你的作业到原著地址,同时也可以讨论一些关于单元测试的问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值