单元测试
黑盒测试BDD(先开发功能再测试是否能实现) 白盒测试TDD(先写测试用例,测试驱动开发)
测试框架:vue/test-utils(vue用) Jest(node模拟dom环境)
测试用例文件:.test.js结尾 .spec.js结尾(vue)
npm init -y
npm install jest
npm install @types/jest
npm install @babel/core @bable/preset-env --save-dev
.babelrc: 高级语法转es5 { "presets":[ 预设 [ 写成数组可以传参数 "@babel/preset-env",{ "targets": {"node":"current"} 目标,转到node版本最新的 } ] ] }
package.json: 配置运行
"scripts": {"test": "jest --watchAll"}
import引入被测试的js文件 describe('用例的作用域',()=>{ it('测试函数',()=>{ //断言 expect(1+1).toBe(2); //计算等于 expect({name:'zf'}).toEqual({name:'zf'}); //是否一模一样 expect(true).toBeTruthy(); //是不是true expect(false).toBeFalsy(); //是不是false expect(1+1).not.toBe(3); //取反 expect(1+1).toBeLessThan(3); //是不是小于 expect(1+1).toBeGreaterThan(1); //是不是大于 expect('hello').toContain('h'); //是否包含h expect('hello').toMatch(/h/); //用正则 }) })
自动化测试
npm run test
按f 强制刷新报错的
按o 只运行修改的,根据git历史
按p 输入文件名
按t 输入test测试名
按q 退出
按enter 全部重新执行
git init
加.gitignore文件:node_modules
git add .
git commit -m 'init'
dom.js:
export const removeNode = (node) => {
node.parentNode.removeChild(node)
};
dom.test.js:
//单元测试中使用jsdom,然后你可以在测试文件中正常使用document对象 const { JSDOM } = require('jsdom'); const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`, { runScripts: "dangerously" }); global.document = dom.window.document; import { removeNode } from "./dom"; describe('测试能否删除dom节点',()=>{ it('removeNode',()=>{ document.body.innerHTML = `<div><button id="btn"></button></div>`; let btn = document.querySelector('#btn'); expect(btn).not.toBeNull(); //刚开始btn是否存在 removeNode(btn); btn = document.querySelector('#btn'); expect(btn).toBeNull(); //btn是否被删除掉了 }) })
Karma
npm install --save-dev karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha karma-chai
karma.conf.js
var webpackConfig = require('@vue/cli-service/webpack.config') module.exports = function(config) { config.set({ frameworks: ['mocha'], files: ['tests/**/*.spec.js'], preprocessors: { '**/*.spec.js': ['webpack', 'sourcemap'] }, autoWatch: true, webpack: webpackConfig, reporters: ['spec'], browsers: ['ChromeHeadless'] }) }
{ "scripts": { "test": "karma start" } }
import { expect } from 'chai' import Button from '@/packages/button'; import Icon from '@/packages/icon'; // @ts-ignore import { createApp } from 'vue/dist/vue.esm-bundler.js'; describe('HelloWorld.vue', () => { it('测试插槽显示是否正常', () => { const container = document.createElement('div'); const app = createApp({ template: `<zfButton>hello</zfButton>`, components: { "zfButton": Button, } }, { icon: 'edit', }).mount(container); let html = app.$el.innerHTML expect(html).to.match(/hello/) }); it('测试icon是否能够正常显示', () => { const container = document.createElement('div'); const app = createApp({ ...Button, }, { icon: 'edit', }).use(Icon).mount(container); let useEle = app.$el.querySelector('use'); let href = useEle.getAttribute('xlink:href'); expect(href).to.eq('#icon-edit'); }); it('测试传入loading时 按钮为禁用态', () => { const container = document.createElement('div'); const app = createApp({ template: `<zfButton></zfButton>`, components: { "zfButton": Button, } }, { loading: true, }).use(Icon).mount(container); let useEle = app.$el.querySelector('use'); let href = useEle.getAttribute('xlink:href'); let disabeld = app.$el.getAttribute('disabled') expect(href).to.eq('#icon-loading'); expect(disabeld).not.to.eq(null); }); // todo.... })