Jest学习

小玖_jiu

单元测试和集成测试的区别

单元测试:英文是(unit testing) 单,是指对软件中的最小可测试单元进行检查和验证。前端所说的单元测试就是对一个模块进行测试。也就是说前端测试的时候,你测试的东西一定是一个模块。

集成测试:也叫组装测试或者联合测试。在单元测试的基础上,将所有模块按照涉及要求组装成为子系统或系统,进行集成测试。

随着前端的发展,现在无论我们些React还是写Vue,其实代码已经全部都模块化了,所以使用Jest测试不需要额外加入任何的操作了。

jest --init

创建一个基础配置文件

jest --coverage //生成覆盖率报告

当然这个不仅会有一个简单的终端图表,还会生成一个coverage的文件夹,这里边有很多文件。
我们可以打开coverage-lcov-reporrt-index.html文件,这时候就可以看到一个网页形式的,非常漂亮的测试覆盖率报告。

coverageDirectory : "coverage"

jest.config.js "coverage" 生成测试报告目录的文件夹名字
打开测试覆盖率选项

Jest 中的匹配器(并非全部)

https://www.jestjs.cn/docs/ex... 所有方法文档
toBe()
toBe()匹配器,是在工作中最常用的一种匹配器,简单的理解它就是相等。这个相当是等同于===的,也就是我们常说的严格相等。
为了更好的理解toBe()匹配器,我们新写一段代码,代码如下。

test('测试严格相等',()=>{
  const a = {number:'007'}   
  expect(a).toBe({number:'007'})
}) 

写完后使用yarn test来进行测试。我们可以知道,这个不是完全相等的,引用地址不同,所以测试应该是FAIL。结果跟我们想象是一直的,通过这小段代码,你可以很清楚的知道toBe()匹配器的作用了吧。

toEqual()
那你说我想让上面的测试结果是正确的,这时候我需要使用什么匹配器那?那就是使用toEqual()匹配器。可以把它理解成只要内容相等,就可以通过测试,比如修改代码如下:

test('测试严格相等',()=>{
  const a = {number:'007'}   
  expect(a).toEqual({number:'007'})
}) 

所以说当你不严格匹配但要求值相等时时就可以使用toEqual()匹配器。

toBeNull()
toBeNul()匹配器只匹配null值,需要注意的是不匹配undefined的值。我们复制上面的代码,然后把代码修改成如下形式:

test('toBeNull测试',()=>{
  const a = null   
  expect(a).toBeNull()
}) 

但是如果我们把a的值改为undefined,测试用例就通过不了啦。

toBeUndifined()
那我们要匹配undefined时,就可以使用toBeUndifined()匹配器,比如写成如下代码。

test('toBeUndefined测试',()=>{
  const a = undefined   
  expect(a).toBeUndefined()
}) 

如果我们把undefined改为空字符串也是没有办法通过测试的。

toBeDefined()
toBeDefined()匹配器的意思是只要定义过了,都可以匹配成功,例如下面的代码:

test('toBeDefined测试',()=>{
  const a = 'jspang'  
  expect(a).toBeDefined()
}) 

这里需要注意的是,我给一个null值也是可以通过测试的。

toBeDefined()
这个是true和false匹配器,就相当于判断真假的。比如说写下面这样一段代码:

test('toBeTruthy 测试',()=>{
  const a = 0
  expect(a).toBeTruthy()
}) 

这样测试就过不去了,因为这里的0,如果判断真假时,就是false,所以无法通过。同样道理null也是无法通过的。 但是我们给个1或者jspang字符串,就可以通过测试了。

toBeFalsy()
toBeFalsy()匹配器
有真就有假,跟toBeTruthy()对应的就是toBeFalsy,这个匹配器只要是返回的false就可以通过测试。

test('toBeFalsy 测试',()=>{
  const a = 0
  expect(a).toBeFalsy()
}) 

toMatch()
字符串包含匹配器,比如象牙山洗脚城有三个美女:谢大脚、刘英和小红,这时候我们要看看字符串中有没有谢大脚就可以使用toMatch()匹配器。

test('toMatch匹配器',()=>{
  const str="谢大脚、刘英、小红"
  expect(str).toMatch('谢大脚')
})

因为确实有“谢大脚”,所以就通过测试了,当然你也可以写正则表达式。

test('toMatch匹配器',()=>{
  const str="谢大脚、刘英、小红"
  expect(str).toMatch(/谢大脚/)
})

我们可以开启yarn test就可以看到测试结果也是正确的

toContain()
刚才我们使用的只是一个字符串包换关系的匹配器,但是在工作中使用的多是数组,所以这里我们使用数组的匹配器toContain()。比如还是上面象牙山洗脚城的案例,我们就可以写成这样。

test('toContain匹配器',()=>{
  const arr=['谢大脚','刘英','小红']
  expect(arr).toContain('谢大脚')
})

当然他也可以完美的兼容set的测试,比如把下面代码改为下面的方式。

test('toContain匹配器',()=>{
  const arr=['谢大脚','刘英','小红']
  const data = new Set(arr)
  expect(data).toContain('谢大脚')
})

toThrow()
专门对异常进行处理的匹配器,可以检测一个方法会不会抛出异常。比如我们下面一段代码。

const throwNewErrorFunc = ()=>{
  throw new Error('this is a new error')
}
test('toThrow匹配器',()=>{
  expect(throwNewErrorFunc).toThrow()
})

我们也可以对这个匹配器中加一些字符串,意思就是抛出的异常必须和字符串相对应。

const throwNewErrorFunc = ()=>{
  throw new Error('this is a new error')
}

test('toThrow匹配器',()=>{
  expect(throwNewErrorFunc).toThrow('this is a new error')
})

如果字符串不匹配,也没办法通过异常测试。

not
not匹配器是Jest中比较特殊的匹配器,意思就是相反或者说取反.比如上面的例子,我们不希望方法抛出异常,就可以使用not匹配器。

const throwNewErrorFunc = ()=>{
  throw new Error('this is a new error')
}

test('toThrow匹配器',()=>{
  expect(throwNewErrorFunc).not.toThrow()
})

现在这个测试用例就不能通过测试了,我们需要删除或注释掉抛出的异常,才可以通过测试。这就是not匹配器的用法。

数字相关匹配器

toBeGreaterThan()
这个是用来作数字比较的,大于什么数值,只要大于传入的数值,就可以通过测试。我们来写一段代码来看一下。

test('toBeGreaterThan匹配器',()=>{
  const count = 10
  expect(count).toBeGreaterThan(9)
})

toBeLessThan()
toBeLessThan跟toBeGreaterThan相对应的,就是少于一个数字时,就可以通过测试。代码如下:

test('toBeLessThan匹配器',()=>{
  const count = 10
  expect(count).toBeLessThan(11)
})

10比11小,所以测试用例顺利通过。

toBeGreaterThanOrEqual()
当测试结果数据大于等于期待数字时,可以通过测试。比如下面的代码是没办法通过测试的。

test('toBeGreaterThan匹配器',()=>{
  const count = 10
  expect(count).toBeGreaterThan(10)
})

但是我们使用了toBeGreaterThanOrEqual()就可以通过测试。

test('toBeGreaterThanOrEqual匹配器',()=>{
  const count = 10
  expect(count).toBeGreaterThanOrEqual(10)
})

toBeLessThanOrEqual()
这个跟toBeGreaterThanOrEqual()相对应,所以就不做过多的介绍了

toBeCloseTo()
这个是可以自动消除JavaScript浮点精度错误的匹配器,举个例子,比如我们让0.1和0.2相加,这时候js得到的值应该是0.30000000000004,所以如果用toEqual()匹配器,测试用例会通过不了测试的。
比如我们把测试用例写成这样,就不会通过:

test('toEqual匹配器',()=>{
  const one = 0.1
  const two = 0.2
  expect(one + two).toEqual(0.3)
})

这时候我们就需要使用toBeCloseTo()匹配器,可以顺利通过测试,代码如下:

test('toBeCloseTo匹配器',()=>{
  const one = 0.1
  const two = 0.2
  expect(one + two).toBeCloseTo(0.3)
})

这样就可以顺利通过测试了,这就是它的作用。

让Jest支持import和ES6语法

Babel转换器的安装
其实解决这个问题,直接使用Babel就可以把代码转换成CommonJS代码,然后就可以顺利进行测试了。那现在就来安装一下Babel.

npm install @babel/core@7.4.5 @babel/preset-env@7.4.5 -D
或者直接使用yarn来进行安装

yarn add @babel/core@7.4.5 @babel/preset-env@7.4.5 --dev
耐心等待babel安装完成,然后打开package.json文件,可以看到文件里有这样两行代码。

"devDependencies": {
  "@babel/core": "^7.4.5",
  "@babel/preset-env": "^7.4.5",
  "jest": "^24.8.0"
},

看到这样的代码,说明Babel已经安装成功。然后我们还需要对Babel进行配置。

Babel的基本配置
我们在项目根目录下新建一个.babelrc的文件,作为一个前端,你对这个文件应该是非常熟悉的,babel的转换配置就写在这个文件里。

{
  "presets":[
    [
      "@babel/preset-env",{
        "targets":{
          "node":"current"
        }
      }
    ]
  ]
}

当你写完这段代码后,就可以进行转换了。我们再次使用yarn test进行测试,这时候就可以正确通过测试了。也就是说我们用的babel起到作用了。

那为什么会这样那?其实在Jest里有一个babel-jest组件,我们在使用yarn test的时候,它先去检测开发环境中是否安装了babel,也就是查看有没有babel-core,如果有bable-core就会去查看.babelrc配置文件,根据配置文件进行转换,转换完成,再进行测试。

阅读 280

投进的球是侥幸,打的铁才是人生。

63 声望
0 粉丝
0 条评论
你知道吗?

投进的球是侥幸,打的铁才是人生。

63 声望
0 粉丝
宣传栏