前端单元测试入门2-jest

1.常用测试框架

• qunit jQuery
• mocha 支持Node&Browser express.js
• jasmine支持Node&Browser Vue.js
• karma A Test-Runner 在不同的浏览器中跑测试用例 Angular

• jest React

  • 零配置
  • 内置代码覆盖率
  • 内置Mocks

2 jest

2.1 安装

npm i jest --save-dev 
npm i jest -g

2.2 编写

**/test.js

2.3 运行

npx run jest
npm run test(配置scripts)

2.4 编写测试用例

• Test Suits 测试套件，每个文件就是一个套件
• Test Group 分组 describe
• Test Case 测试用途 test()
• Assert 断言 expect(）

//qs.test.js
let { parse, stringify } = require('./qs');
describe('parse', () => {//分组
    test('one', () => {//测试用例
        expect(parse("name=zfpx").name).toBe('zfpx');
    });
    test('two', () => {
        expect(parse("name=zfpx&age=9").age).toBe('9');
    });
});


describe('stringify', () => {
    test('one', () => {
        expect(stringify({ name: 'zfpx' })).toBe('name=zfpx');
    });
    test('two', () => {
        expect(stringify({ name: 'zfpx', age: 9 })).toBe('name=zfpx&age=9');
    });
});

2.5 配置

2.5.1 配置位置

• package.json
• jest.config.js（推荐）
• 命令行

2.5.2 配置项

• testMatch glob规则,识别哪些文件中测试文件
• testRegex 文件正则
• testEnvironment 测试环境
• rootDir 根目录
• moduleFileExtensions 模块文件扩展名

具体的配置项可参数后续的2.10附录

module.exports = {
    //设置识别哪些文件是测试文件（glob形式），与testRegex互斥，不能同时写
    testMatch: ['**/__tests__/**/*.js?(x)', '**/?(*.)(spec|test).js?(x)'],
    //设置识别哪些文件是测试文件（正则形式），与testMatch互斥，不能同时写
    testRegex: '(/__tests__).*|(\\.|/)(test|spec))\\.jsx?$',
    //测试环境，默认值是：jsdom，可修改为node
    testEnvironment: 'jsdom',
    //默认值：当前目录，一般是package.json所在的目录。
    rootDir: '',
    //测试文件的类型
    moduleFileExtensions: ['js', 'json', 'jsx', 'node']
}

2.5.3 Matchers

• 相等断言

  • toBe(value)： 比较数字、字符串
  • toEqual(value)： 比较对象、数组
  • toBeNull()
  • toBeUndefined()

• 包含断言

  • toHaveProperty(keyPath, value)： 是否有对应的属性
  • toContain(item)： 是否包含对应的值，括号里写上数组、字符串
  • toMatch(regexpOrString)： 括号里写上正则

• 逻辑断言,在JavaScript中，有六个falsy值：false，0，''，null， undefined，和NaN。其他一切都是Truthy。

  • toBeTruthy()
  • toBeFalsy()
  • toBeGreaterThan(number)： 大于
  • toBeLessThan(number)： 小于
• not 取反

test('matchers', () => {
    const a = {
        name: 'a',
        home: {
            name: 'beijing'
        }
    }
    const b = {
        name: 'a',
        home: {
            name: 'beijing'
        }
    }
    expect(a).toEqual(b)
    expect([1, 2, 3]).toEqual([1, 2, 3])
    expect(null).toBeNull()

    expect([1, 2, 3]).toContain(1)
    expect(b).toHaveProperty('home')
    expect('abc').toContain('b')
    expect('abc').toMatch(/^\w+$/)
    expect('123').not.toContain('4')
})

2.6 DOM测试

• jsdom
• Jest能操作DOM是因为内置了JSDOM
• JSDOM是在node中模拟了DOM环境

//dom.js
function remove(node) {
    node.parentNode.removeChild(node);
}
function on(node, type, handler) {
    node.addEventListener(type, handler);
}
exports.remove = remove;
exports.on = on;

//dom.test.js
let { remove, on } = require('./dom');
describe('dom', () => {
    test('remove', () => {
        document.body.innerHTML = '<div id="container"><span id="hello">hello</span></div>';
        let container = document.getElementById('container');
        expect(container.nodeName.toLocaleLowerCase()).toBe('div');
        let hello = document.getElementById('hello');
        expect(hello.nodeName.toLocaleLowerCase()).toBe('span');
        remove(hello);
        let hello2 = document.getElementById('hello');
        expect(hello2).toBeNull();
    })

    test('on', () => {
        document.body.innerHTML = '<div id="container"><button id="clickMe">click</button></div>';
        let clickMe = document.getElementById('clickMe');
        on(clickMe, 'click', () => {
            clickMe.innerHTML = 'clicked';
        });
        clickMe.click();
        expect(clickMe.innerHTML).toBe('clicked');

    })
});

2.7 测试选项卡

tab.html

<div id="tab">
    <div>
        <a href="#" class="tab-button">选项1</a>
        <a href="#" class="tab-button">选项2</a>
    </div>
    <div>
        <div class="tab-panel">面板1</div>
        <div class="tab-panel">面板2</div>
    </div>
</div>

Tab.js

class Tab{
    constructor(id,buttonClass,panelClass){
        this.tab = tab = document.querySelector('#'+id);
        this.buttons = Array.from(tab.querySelectorAll('.'+buttonClass));
        this.panels = Array.from(tab.querySelectorAll('.'+panelClass));
        this.select(0);
        this.bindEvent();
    }
    select(index){
        this.buttons.forEach(button=>button.style.backgroundColor= 'white');
        this.buttons[index].style.backgroundColor= 'red';
        this.panels.forEach(panel=>panel.style.display= 'none');
        this.panels[index].style.display= 'block';
    }
    bindEvent(){
        for(let i=0;i<this.buttons.length;i++){
            this.buttons[i].addEventListener('click',()=>{
                this.select(i);
            });
        }
    }
}
module.exports = Tab;

Tab.test.js

const Tab = require('../src/tab');
const fs = require('fs');
const path = require('path');

test('tab',function(){
    document.body.innerHTML = fs.readFileSync(path.resolve(__dirname,'tab.html'),'utf8');
    const tab = new Tab('tab','tab-button','tab-panel');
    expect(tab.buttons[0].style.backgroundColor).toBe('red');
    expect(tab.buttons[1].style.backgroundColor).toBe('white');
    expect(tab.panels[0].style.display).toBe('block');
    expect(tab.panels[1].style.display).toBe('none');
    tab.buttons[1].click();
    expect(tab.buttons[0].style.backgroundColor).toBe('white');
    expect(tab.buttons[1].style.backgroundColor).toBe('red');
    expect(tab.panels[0].style.display).toBe('none');
    expect(tab.panels[1].style.display).toBe('block');
});

2.8 异步测试

• jest默认不会处理异常任务
• 2.如果函数里的形参使用了done的话， jest会阻塞在此不往下执行，
• 3.jest会等待done被调用才会继续向下执行
• 4.超过5000不会执行,会提示 Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.

test('async',(done)=>{
    setTimeout(()=>{
        expect(2).toBe(2);
        done();
    },1000);
}); 

2.9 代码覆盖率

• line coverage 行覆盖率
• function coverage 函数覆盖率
• branch coverage 分支覆盖率
• statement coverage 语句覆盖率

npm run jest --coverage
npx jest --coverage

2.10附录

2.10.1 glob

gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：

2.10.2 glob规则

匹配符	说明
星	匹配文件路径中的0个或多个字符，但不会匹配路径分隔符
**	匹配路径中的0个或多个目录及其子目录
[...]	匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个
!(pattern pattern pattern)	匹配任何与括号中给定的任一模式都不匹配的
?(pattern pattern pattern)	匹配括号中给定的任一模式0次或1次，类似于js正则中的?
+(pattern pattern pattern)	匹配括号中给定的任一模式至少1次，类似于js正则中的+
(pattern pattern pattern)	匹配括号中给定的任一模式0次或多次，类似于js正则中的 *
@(pattern pattern pattern)	匹配括号中给定的任一模式1次，类似于js正则中的

2.10.3 glob示例

glob	匹配
*	能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js
.	a.js,style.css,a.b,x.y
//*.js	能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
**	能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件
a/**/z	能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
a/**b/z	能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录
?.js	能匹配 a.js,b.js,c.js
a??	能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符
[xyz].js	只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符
[^xyz].js	能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js