单元测试
- 测试一个函数
- 测试一个组件
上面的叫单元测试。
- 测试整个页面就不叫做单元测试了
为什么要做单元测试
- 我们能够保证我们的代码质量
- 你可能觉得前端的单元测试会增加你的工作量,放心可以通过代码自动生成
- 通过单元测试更好的去解释当前的代码运行
- 能够驱动开发,指导设计
- 对于项目重构有所保障
他的目的
- 为了让开发人员明确知道代码结果
原则
- 单一指责、接口抽象、层次分离
断言库
- 保证最小单元是否正常运行检测方法
部分框架
看PPT
- 安装 karma:
pnpm install karma -D
- 修改package.json:
"karma:init":"karma init",
- 运行:
pnpm karma:init
-
- 选择:jasmine / no / PhantomJS / 会车... / no
- 生成文件:
/Users/edz/yd-learn/karma.conf.js
框架原理
- karma框架里有一个无头浏览器,我们的js文件会先在里面执行
- 然后运行测试的.spec.js文件
- 发现你用了三方的it断言库,运行断言库
e2e
- 如果你做e2e可以使用jest
ui测试
- backstopjs
接口测试
- express supertest 用来测试node接口。
单元测试个部分配置
karma 单元测试
- 能够对函数,组件进行单元测试
- 安装
karma karma-coverage jasmine-core karma-jasmine karma-phantomjs-launcher phantomjs-prebuilt
- 通过
karma init
生成karma.conf.js
文件
module.exports = function (config) {
config.set({
// 基础路径
basePath: '',
// 你要使用什么框架
frameworks: ['jasmine'],
// 浏览器中加载哪些文件
files: ["./src/**/*.js", "./tests/unit/**/*.spec.js"],
// 排除哪些文件
exclude: [],
// 预处理一些文件,在他们提供给浏览器之前
// 预先处理 src/**/*.j下的文件,
preprocessors: {
"src/**/*.js": ["coverage"]
},
// 测试结果使用什么?
reporters: ['progress', "coverage"],
port: 9876,
// 输出时候有颜色么?
colors: true,
// 使用什么级别记录
logLevel: config.LOG_INFO,
// 当文件改变的时候是否进行检测?
autoWatch: false,
// 启动这些浏览器
// 但是一般使用无头浏览器
browsers: ['PhantomJS'],
// 持续集成
// 如果为true,Karma 捕获浏览器,运行测试并且退出
singleRun: true,
coverageReporter: {
type: 'html',
dir: "docs/coverage/"
},
// 并发等级
// 怎么让多个浏览器同时启动
concurrency: Infinity
})
}
- 我们会在tests目录下写单元测试,对src里的js文件进行单元测试
- 会在docs/coverage/PhantomJS 2.1.1 (Mac OS 0.0.0) 目录下生成对应的单元测试文件,这个目录中有index.html,在浏览器打开可以看见对应的单元测试信息。
jest
- 我当前是使用jest来做e2e
- jest 的最佳伴侣是 majestic,当我们运行
yarn jest:start
的时候,如果没有配置,他会自动取查找*.spec.js *.test.hs *.test.js
文件并执行
const { Builder, By, Key, until } = require('selenium-webdriver');
(async function example() {
let driver = await new Builder().forBrowser('chrome').build();
try {
await driver.get('https://www.baidu.com/');
await driver.findElement(By.name('wd')).sendKeys('京程一灯', Key.RETURN);
await driver.wait(until.titleIs('京程一灯_百度搜索'), 1000);
} finally {
await driver.quit();
}
})();
- 上面代码是e2e中的测试文件,会自动打开chrome浏览器,然后运行下面的步骤。
- majestic 会打开一个页面,能够在这个页面中进行单元测试。
backstop
- ui图的对比,ui走查
backstopjs
安装,运行"ui:init": "backstop init"
生成配置文件:backstop.json
- 运行
"ui": "backstop test"
会生成一个ui对比页面,就不需要再一像素一像素去找了
express supertest
- 使用这两个,对接口进行测试,测试node
- 运行 node mochasRunner.js
const Mocha = require('mocha');
const mocha = new Mocha({
reporter: 'mochawesome',
reporterOptions: {
reportDir: './docs/mochawesome-report',
quiet: true,
},
});
mocha.addFile('./tests/services/router.spec.js');
mocha.run(function (err) {
console.log('🍺接口测试完毕');
if (err) {
//出错的退出 CI CD
process.exit(-1);
} else {
process.exit();
}
});
往 mocha 中添加一个文件:./tests/services/router.spec.js
运行 mocha 测试完毕会将错误抛出
const request = require("supertest")
const express = require("express")
const app = express()
app.get("/user", function (req, res) {
res.status(200).json({
name: "john"
})
})
describe("Node自动化测试", function () {
it("获取首页数据", function (done) {
request(app)
.get("/user")
.expect("Content-Type", /json/)
.expect("Content-Length", "15")
.expect(200)
.end(function (err, res) {
if (err) {
done(err);
} else {
done()
}
})
})
it('404测试', function (done) {
request(app)
.get('/xx')
.expect(200)
.end(function (err, res) {
if (err) {
done(err);
} else {
done();
}
});
});
})
总结
- 单元测试
- karma
- jest e2e
- backstop ui对比
- express supertest 接口测试