angular单元测试jest
前⾔
最近公司要求笔者开发编写项⽬单元测试,之前使⽤过angular框架,但是不知道原来在⽣成组件的时候多的内个⽂件(name.spec.ts)是⽤来编写angular的单元测试的。下⾯简单介绍⼀下关于单元测试的⼀些问题。
单元测试代码和业务代码的关联:
测试代码是⽤来测试我们业务代码是否逻辑准确,代码函数等是否可以实现逻辑的预期,帮我们增加代码的稳定性。
刚开始笔者对于单元测试毫⽆了解感觉,对于未知的东西感觉很恐惧没有把握程序,上司要求完成的时间感觉也⽐较有风险,但是后⾯我通过同事的帮助,了解到测试⽤例其实⼤概的逻辑就是,⼿动构造相关参数,然后在测试⽤例中调⽤该⽅法,写出你理想的预期。然后jest就会帮我们测试该函数实际功能是否可以达到预期。
单元测试相关配置
{
...
"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"
angular安装},
//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 messag
e.("<main>
[ERROR->]<cl-header></cl-header>```
解决⽅法:
```javascript
import{NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA}from'@angular/core';
然后在测试⽤例 should create中
schemas:[NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA]
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论