Jest和enzyme 前端单元测试工具

Jest和enzyme 前端单元测试工具

什么是Jest？

Jest是一个令人愉悦的JavaScript测试框架，其重点是简单性。

它适用于使用以下项目的项目：Babel，TypeScript，Node，React，Angular，Vue等！

特点

• 零配置
• 快照
• 隔离的
• 很棒的api

入门

使用yarn以下命令安装Jest ：

yarn add --dev jest

或npm：

npm install --save-dev jest

或者全局global安装

例子

function sum(a, b) { 
    return a + b; 
} 
module.exports = sum;

覆盖率报告

jest --coverage

生成基本配置

jest --init

语法

匹配器

toBe 普通匹配

test('two plus two is four', () => { 
    expect(2 + 2).toBe(4); 
});
// 用来检测基本数据的相等，对象需要使得toEqual

toEqual

相当于深比较，会递归对象或数组

特殊类型判断

• toBeNull 仅匹配 null
• toBeUndefined 仅匹配 undefined
• toBeDefined 与...相反 toBeUndefined
• toBeTruthy匹配if语句视为真实的任何内容
• toBeFalsy匹配if语句视为假的任何内容

异步方法测试

callback 回调

这里需要一个done来调用，然后使用try catch包裹。

test('测试回调异步',(done)=>{ 
   let callback= (res)=>{
     expect(res).toBe('this is callback'); 
   } 
    Ajax(callback)
 })

promise

这里主要特指使用Promise的异步方法，回调`callback

test('测试promise的异步操作',()=>{ 
 Post("ok").then((res)=>{ 
    expect(res).toBe('ok');
 }) 
 Post("x").catch((res)=>{ 
    console.log(res) expect(res).toBe('error');
 }) 
})

enzyme

nzyme 来自 airbnb 公司，是一个用于 React 的 JavaScript 测试工具，方便你判断、操纵和历遍 React Components 输出。Enzyme 的 API 通过模仿 jQuery 的 API ，使得 DOM 操作和历遍很灵活、直观。Enzyme 兼容所有的主要测试运行器和判断库。

安装与配置

npm install --save-dev enzyme

安装Enzyme Adapter来对应React的版本 npm install --save-dev enzyme-adapter-react-16

babel配置

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer 

// babel.config.js 
module.exports = { 
    presets: ['@babel/preset-env', '@babel/preset-react'],
 };

shallow 浅渲染

将组件渲染成虚拟DOM对象，只会渲染第一层，子组件将不会被渲染出来，因而效率非常高。 

Enzyme.configure({
adapter:new Adapter()
})

test('测试react组件',()=>{ 
let test = shallow(<Test value="1"/>) console.log(test.find('div').text()) // expect(test.prop('value')).toBe("1"); 
console.log(test.props()) 
console.log(test.state()) 
expect(test.text()).toBe("2") 
}) 

test('测试事件操作',()=>{ 
 let test = shallow(<Test value={1}/>);
 test.simulate('click')
 console.log(test.state('dv')) 
 expect(test.text()).toBe("3"); 
 test.simulate('click') expect(test.text()).toBe("4"); 
})

 避免每个文件中都引用adapter，可以在根目录下建个jest.setup.js文件，然后在jest.config.js中指定启动路径。

render 静态渲染

将React组件渲染成静态的HTML字符串，然后使用Cheerio这个库解析这段字符串，并返回一个Cheerio的实例对象，可以用来分析组件的html结构。

mount 完全渲染

将组件渲染加载成一个真实的DOM节点，用来测试DOM API的交互和组件的生命周期，用到了jsdom来模拟浏览器环境。

sinon spy模拟函数

与mock基本相同

安装

npm install sinon --save-dev

let spy = sinon.spy(NumberInput.prototype,'componentWillReceiveProps')//监听生命周期 
console.log(spy.calledCount)

本文源码地址：https://github.com/tianxiangbing/share/tree/master/jest