angular 单元测试jest

前言

	最近公司要求笔者开发编写项目单元测试，之前使用过angular框架，但是不知道原来在生成组件的时候多的内个文件（name.spec.ts）是用来编写angular的单元测试的。下面简单介绍一下关于单元测试的一些问题。

单元测试代码和业务代码的关联：

测试代码是用来测试我们业务代码是否逻辑准确，代码函数等是否可以实现逻辑的预期，帮我们增加代码的稳定性。
刚开始笔者对于单元测试毫无了解感觉，对于未知的东西感觉很恐惧没有把握程序，上司要求完成的时间感觉也比较有风险，但是后面我通过同事的帮助，了解到测试用例其实大概的逻辑就是，手动构造相关参数，然后在测试用例中调用该方法，写出你理想的预期。然后jest就会帮我们测试该函数实际功能是否可以达到预期。

单元测试相关配置

jest.config.js：在这个文件中可以配置相关参数，笔者公司要求覆盖率要分别达到：分支50%，函数：50% ，行数：80%，小伙伴可以根据自己实际进行配置

{
  ...
  "jest": {
    "coverageThreshold": {
      "global": {
        "branches": 50,
        "functions": 50,
        "lines": 80,
        "statements": -10
      }
    }
  }
}

package.json文件

首先安装jest，全局或项目都可

npm i -g jest 

然后在package.json文件中scripts中配置命令

"scripts": {
    "test":"jest --watch"
  },

其他配置可以参考jest官网：https://jestjs.io/docs/configuration
运行npm run test就可测试 命令行后 --watch的意思是运行每次运行改动后的测试文件即可 （此命令要生效需要项目要连接远程仓库，这样才可以比较哪些文件做了改动）
jest相关匹配器使用：

//eg:期望3+3是6
expect(3+3).toBe(6)
//eg:toEqual  引用对象地址不同所以使用toBe会失败，toEqual不在乎引用地址，只关注值
const a={test:1}
expect(a).toEqual({test:1})

遇到问题：
笔者在angular中编写测试的时候因为公司用的组件库所以测试用例不知道这是组件会报错无法识别的错误如下

Unhandled Promise rejection: Template parse errors:
'cl-header' is not a known element:
1. If 'cl-header' is an Angular component, then verify that it is part of this module.
2. If 'cl-header' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<main>
    [ERROR ->]<cl-header>Loading Header...</cl-header>```
解决方法：

```javascript
import { NO_ERRORS_SCHEMA， CUSTOM_ELEMENTS_SCHEMA }      from '@angular/core';
然后在测试用例  should create中
  schemas: [NO_ERRORS_SCHEMA， CUSTOM_ELEMENTS_SCHEMA ]

ps:笔者在写的时候 这两个可以在有些文件中生效有些不生效，还没找到解决方法，找到之后再补充哈！各位小伙伴有知道的也可以在下面留言哈!
还有很多匹配器具体可以看官网用法大差不差：https://www.jestjs.cn/docs/using-matchers