前端Jest测试学习笔记

Jest常用API 

it/test

it/test函数是用来定义测试用例（test case）的，它的函数签名是it(description, fn?, timeout?)，description参数是对这个测试用例的一个简短的描述，fn是一个运行我们实际测试逻辑的函数，而timeout则是这个测试用例的超时时间。

describe

describe函数是用来给测试用例分组用的，它的函数签名是describe(description, fn)，description是用来描述这个分组的，而fn函数里面则可以定义内嵌的分组（nested）或者是一些测试用例（it）。

expect

比较被测试对象的输出和我们期待的输出是不是一致的。

详细API可查看官网：https://jestjs.io/docs/en/api

Jest中对dom节点操作的测试

解决jest jQuery requires a window with a document

var jsdom = require('jsdom');
const $ = require('jquery')(new jsdom.JSDOM().window);

// jq.js
var jsdom = require('jsdom');
export const $ = require('jquery')(new jsdom.JSDOM().window);
const addDivInBody = () => {
    $('body').append('<div>hello world</div>')
    console.log('html内容： ', $('body').html());
}

export default addDivInBody

// jq.test.js
import addDivInBody, {$} from './jq.js'
test('测试 addDivInBody', ()=>{
    addDivInBody();
    addDivInBody();
    expect($('body').find('div').length).toBe(2);
})

// jest 运行环境是node, 不具备dom,但是它在node环境模拟了一套dom的api, jsdom

Test Driver Development(TDD) 测试驱动的开发

TDD开发流程

1. 编写测试用例。
2. 运行测试，测试用例无法通过测试。
3. 编写代码，使测试用例通过测试。
4. 优化代码，完成开发。
5. 重复上诉步骤。

TDD的优势

1. 长期减少回归bug。
2. 代码质量更好（组织，可维护性）。
3. 测试覆盖率高