spark网站开发,最简单的网站开发软件,在北京建设教育协会的网站,怎么推广游戏代理赚钱最近在研究单元测试#xff0c;虽说前端如果不是大且的项目不必要加#xff0c;但至少得会#xff0c;因此花了些时间研究#xff0c;以下是我总结jest的使用。
jest是什么#xff1f;
Jest是 Facebook 的一套开源的 JavaScript 测试框架#xff0c; 它自动集成了断言、…最近在研究单元测试虽说前端如果不是大且的项目不必要加但至少得会因此花了些时间研究以下是我总结jest的使用。
jest是什么
Jest是 Facebook 的一套开源的 JavaScript 测试框架 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具是一款几乎零配置的测试框架。它能支持很多框架比如 Babel、TypeScript、Node、React、Angular、Vue 等诸多框架。
vue中的jest的安装
执行安装命令
vue中使用jest其实并没有我们想象的那么复杂之前我使用jest的时候查了较多资料也配置了许多设置繁忙且繁琐直到最后我才发现原来仅仅只需要执行一句指令即可。
vue add vue/cli-plugin-unit-jest这个命令会帮我们把相关的配置都配好相关的依赖都装好还会帮我们生成一个jest.config.js文件。
jest中常用的一些配置项的介绍
module.exports {moduleFileExtensions: [ //不需要配置js,json,// 告诉 Jest 处理 *.vue 文件vue],testMatch: [ //test文件所在位置**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)],transform: { //不需要配置// 用 vue-jest 处理 *.vue 文件.*\\.(vue)$: rootDir/node_modules/vue-jest,// 用 babel-jest 处理 js^.\\.js$: babel-jest},moduleNameMapper: { //不需要配置^/(.*)$: rootDir/src/$1},collectCoverage: true, //是否创建报告collectCoverageFrom: [**/*.{js,vue}, !**/node_modules/**], //创建报告的文件来源coverageReporters: [html, text-summary] //报告的格式 coveragePathIgnorePatterns:[] //生成报告需要忽略的文件默认值为 node_modules globals:{ //配置全局变量此处我配置了一个全局变量VUE_APP_DATA也可以在setup file中配置如下说的lodash VUE_APP_DATA: {siteENV:DEV}} setupFiles: [rootDir/src/jest-setup.js] //启动jest需要的文件
};在项目目录中创建tests文件再创建unit文件在其中文件命名的话就以 xxx.spec.js命名这个执行命令的时候已经给我们创建了
import { shallowMount } from vue/test-utils
import explame from /components/Explamedescribe(Explame .vue, () {it(renders props.msg when passed, () {const msg new messageconst wrapper shallowMount(Explame , {propsData: { msg }})expect(wrapper.text()).toMatch(msg)})
})在package.json 中添加启动命令然后通过在控制台执行npm run test:unit 进行测试
Scripts配置
test:unit: vue-cli-service test:unitjest的基本语法规则
Jest 支持三种方式写测试代码
.spec.js.test.js放在 __tests__文件夹下
测试结构
describe: 将几个相关的测试放到一个组中非必须test :(别名it)测试用例是测试的最小单位expect提供很多的matcher 来判定你的方法返回值是否符合特定条件
describe(add的方法测试{test(23应该等于5{expect(add(2,3)).toBe(5)})})mock方法和处理
Jest的mock方式 Jest.fn()、Jest.spyOn()、Jest.mock()预处理和后处理 beforeAll / afterAll 对测试文件中所有的用例开始前/ 后 进行统一的预处理beforeEach/ afterEach : 在每个用例开始前 / 后 进行预处理
覆盖率指标
在package.json中 设置 --coverage 即可 测试覆盖率 test:unit: vue-cli-service test:unit --coverage%stmts是语句覆盖率statement coverage是不是每个语句都执行了%Branch分支覆盖率branch coverage是不是每个if代码块都执行了%Funcs函数覆盖率function coverage是不是每个函数都调用了%Lines行覆盖率line coverage是不是每一行都执行了
配置好后会生成一个coverage文件然后打开里面的index.html 里面会有详细的信息展示
三种颜色分别代表不同比例的覆盖率50%红色50%~80%灰色 ≥80%绿色
旁边显示的1x代表执行的次数
好的测试覆盖率标准80%以下不及格90%以上可以使用95%以上优秀
常用的方法 –mount: 创建一个包含被挂载和渲染的 Vue 组件的 wrapper,它仅仅挂载当前实例 —shallowMount和 mount 一样创建一个包含被挂载和渲染的 Vue 组件的 Wrapper只挂载一个组件而不渲染其子组件 (即保留它们的存根),这个方法可以保证你关心的组件在渲染时没有同时将其子组件渲染避免了子组件可能带来的副作用比如Http请求等 —shallowMount和mount的区别在文档中描述为不同的是被存根的子组件大白话就是shallowMount不会加载子组件不会被子组件的行为属性影响该组件。 —单元测试的重点在单元二字而不是测试想测试子组件再为子组件写对应的测试代码即可 —Wrapper常见的有一下几种方法 —Wrapper常见的有一下几种方法 WrapperWrapper 是一个包括了一个挂载组件或 vnode以及测试该组件或 vnode 的方法。Wrapper.vm这是该 Vue 实例。你可以通过 wrapper.vm 访问一个实例所有的方法和属性。Wrapper.classes: 返回是否拥有该class的dom或者类名数组。Wrapper.find返回第一个满足条件的dom。Wrapper.findAll返回所有满足条件的dom。Wrapper.html返回html字符串。Wrapper.text返回内容字符串。Wrapper.setData设置该组件的初始data数据。 Wrapper.setProps设置该组件的初始props数据。 这是使用了但没有效果 Wrapper.trigger用来触发事件。
templatediv classjestdiv classname{{name}}/divdiv classname{{name}}{{text}}/divdiv classtext clickadd{{text}}/div/div
/template
script src./script.js
export default {name:Foo,props:{name:{type: String,default: 啦啦啦}},data() {return {text: 123}},methods:{add(){this.text 1}}
}
/script开始测试
import { shallowMount } from vue/test-utils
import Foo from ./Foo.vuedescribe(Foo, () {const wrapper shallowMount(Foo)console.log(Wrapper.classes()) //[jest]console.log(Wrapper.classes(jest)) //trueconsole.log(Wrapper.find(.name).text()) // 切记如果是类的话要加点 啦啦console.log(Wrapper.findAll(.name)) //返回dom数组 WrapperArray { selector: .name }console.log(Wrapper.findAll(.name).at(0)) //取dom数组中的第一个Wrapper.setData({text : 3}) // 设置一个值 console.log(Wrapper.vm.text) // 3Wrapper.setProps({name : 拉拉})console.log(Wrapper.vm.name) //这个结果仍 为 啦啦啦Wrapper.find(.text).trigger(click)console.log(Wrapper.vm.text) // 4
})也可以初始化某些数据
import { shallowMount } from vue/test-utils
import Foo from ./Foo.vueconst wrapper shallowMount(Foo,{data() {return {bar: lala}},propsData:{message: dd},mocks: {$route: {query: {aaa: 1,}},$router: {push: jest.fn(),replace: jest.fn(),}}
})Jest-Api(使用不同匹配器可以测试输入输出的值是否符合预期)toBe判断是否相等
toBeNull判断是否为nulltoBeUndefined判断是否为undefinedtoBeDefined与上相反toBeNaN判断是否为NaNtoBeTruthy判断是否为truetoBeFalsy判断是否为falsetoContain数组用检测是否包含toHaveLength数组用检测数组长度toEqual对象用检测是否相等toThrow异常匹配 describe(Foo, () {expect(2 2).toBe(4)expect(null).toBeNull()expect(undefined).toBeUndefined()let a 1;expect(a).toBeDefined()a ada;expect(a).toBeNaN()a true;expect(a).toBeTruthy()a false;expect(a).toBeFalsy()a [1,2,3];expect(a).toContain(2)expect(a).toHaveLength(3)a {a:1};expect(a).toEqual({a:1})
})
