Jest是一个令人愉悦的JavaScript测试框架,其重点是简单性。
它适用于使用以下项目的项目:Babel,TypeScript,Node,React,Angular,Vue等!
使用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
test(‘two plus two is four‘, () => { expect(2 + 2).toBe(4); }); // 用来检测基本数据的相等,对象需要使得toEqual
相当于深比较,会递归对象或数组
这里需要一个done来调用,然后使用try catch包裹。
test(‘测试回调异步‘,(done)=>{ let callback= (res)=>{ expect(res).toBe(‘this is callback‘); } Ajax(callback) })
这里主要特指使用Promise
的异步方法,回调`callback
test(‘测试promise的异步操作‘,()=>{ Post("ok").then((res)=>{ expect(res).toBe(‘ok‘); }) Post("x").catch((res)=>{ console.log(res) expect(res).toBe(‘error‘); }) })
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
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来模拟浏览器环境。
与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
原文:https://www.cnblogs.com/tianxiangbing/p/jest.html