集成 Karma 和 Jasmine 进行单元测试

简介

	使用karma + jesmine 框架测试开发前端代码;实现前端自动化测试和开发,下面是对于初学者简单入门的教学教程;

初始化项目

1 创建项目 ,创建package.json文件 npm init -y ; -y指默认值

package.json文件基本内容

{
  "name": "karma-csdn",  
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}  

安装karma

1 安装测试框架karma : npm i -D karma
2 为了能使用karma, 我们需要安装karma-cli 脚手架;可以全局也可以本地 ,这里使用全局安装,方便以后不用再次安装 npm i -g karma-cli

karma指令

  • karma start [< configFile >] [< options >] 启动 Karma 项目,也可以具体指某个文件
  • karma init [] 初始化项目配置

安装单元测试框架 jesmine和插件

1 jesmine-core :jesmine的核心库
2 karma-jesmine 适配karma框架
3 karma-chrome-launcher 配置Google浏览器为测试浏览器
4 安装: npm i -D jasmine-core karma-jasmine karma-chrome-launcher

配置karma

在使用karma自动化测试时,我们要先配置karma基本环境

集成 Karma 和 Jasmine 进行单元测试_第1张图片

启动karma

karma start

在这里插入图片描述

单元测试

编写简单的单元测试用例

根据初始配置的src//*.js和test//*.spec.js,我们可以在test文件目录下先写一个小demo;
1 创建一个文件夹 test,在文件夹下创建test.spec.js

** 代码 **

describe('unit test', () => {
 it('shuold 1 equal 1', () => {
     expect(1).toBe(1);
 });
 it(' 1 equal not 2 ', () => {
     expect(1).toBe(2);
 })
})

2 启动karma start
3 打开google 浏览器:http://localhost:9876/#
4 点击debug; 然后在debug页面中打开开发者工具;查看控制台
集成 Karma 和 Jasmine 进行单元测试_第2张图片

测试纯函数

在src中写入一个纯函数

代码

function add(a, b) {
    return a + b;
}

在测试test中写测试用例

代码

describe('add function to test', () => {
    it('1 + 2 = 3', () => {
        let value = add(1, 2);
        expect(value).toBe(3);
    })
})

重复前面操作查看测试结果

你可能感兴趣的:(web前端)