Jest学习

Posted 2021-10-08 小玖_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配置文件，根据配置文件进行转换，转换完成，再进行测试。