首页 > 编程知识 正文

javascript语言入门(inject)

时间:2023-05-04 09:08:47 阅读:985 作者:2770

本文转载自:http://d.itzoujie.com/Q2Y0x1T2.

1 什么是 Jest?

玩笑

Jest是脸书开源的JavaScript测试框架,它自动集成了开发人员需要的所有测试工具,如断言、JSDom、覆盖率报告等。这是一个几乎没有配置的测试框架。而且对开源前端框架React的测试非常友好,也是脸书。

00-1010

2 安装Jest

在shell中输入以下命令初始化前端项目并生成package.json:

npm初始化-y

00-1010在shell中输入以下命令来安装测试所需的依赖项:

npm安装-D jest巴别塔-jest巴别塔-核心巴别塔-预设-env再生器-运行时

Babel-Jest、babel-core、regenerator-runtime、babel-preset-env是允许我们使用ES6的语法特性进行单元测试的依赖项。jest本身不支持ES6提供的模块导入方式。

00-1010添加。项目根目录下的babelrc文件,并将以下内容复制到文件:中

{

预设' : ['env']

}

00-1010打开package.json文件,将script下的test值更改为jest:

脚本' : {

测试' : '笑话'

}

00-1010创建src并测试目录和相关文件

在项目根目录下创建src目录,在src目录下添加functions.js文件,在项目根目录下创建test目录,在test目录下创建functions.test.js文件。Jest将自动找到所有由。spec.js或。测试. js文件并执行它们。我们在编写测试文件时通常遵循命名标准:测试文件的文件名等于被测试模块的名称。例如,如果被测试的模块是functions.js,那么相应的测试文件就被命名为functions.test.js

在src/functions.js中创建测试模块

导出默认值{

总和

返回a b;

}

}

在test/functions.test.js文件中创建测试用例。

从“”导入函数./src/functions ';

test(' sum(2 ^ 2)等于4 ',()={ 0

expect(functions.sum(2,2))。托比(4);

})

运行npm运行测试,Jest将在shell中打印出以下消息:

PASS test/functions.test.js

总和(2 ^ 2)等于4(7毫秒)

测试套件: 1个通过,共1个

测试: 1通过,共1次

快照总数: 0

时间: 4.8秒

00-1010: expect(函数。sum (2,2))。上面测试用例中的toBe (4)是一个断言。Jest为我们提供了Expect函数来包装被测试的方法并返回一个对象,该对象包含一系列匹配器,使我们更容易断言。上面的Tobe函数是一个匹配器。让我们介绍几个常用的Jest断言,它们涉及多个匹配器。不

//functions.test.js

从“”导入函数./src/functions

Test('sum(2,2)不等于5 ',()={ 0

expect(functions.sum(2,2)). not . tobe(5);

})

那个。not修饰语允许你测试结果不等于某个值的情况,这几乎和英语语法完全一样,也很容易理解。toEqual()

//functions.js

导出默认值{

getAut

hor() { return { name: 'LITANGHUI', age: 24, } } } // functions.test.js import functions from '../src/functions'; test('getAuthor()返回的对象深度相等', () => { expect(functions.getAuthor()).toEqual(functions.getAuthor()); }) test('getAuthor()返回的对象内存地址不同', () => { expect(functions.getAuthor()).not.toBe(functions.getAuthor()); })

.toEqual匹配器会递归的检查对象所有属性和属性值是否相等,所以如果要进行应用类型的比较时,请使用.toEqual匹配器而不是.toBe。

.toHaveLength

// functions.js export default { getIntArray(num) { if (!Number.isInteger(num)) { throw Error('"getIntArray"只接受整数类型的参数'); } let result = []; for (let i = 0, len = num; i < len; i++) { result.push(i); } return result; } } // functions.test.js import functions from '../src/functions'; test('getIntArray(3)返回的数组长度应该为3', () => { expect(functions.getIntArray(3)).toHaveLength(3); })

.toHaveLength可以很方便的用来测试字符串和数组类型的长度是否满足预期。

.toThrow

// functions.test.js import functions from '../src/functions'; test('getIntArray(3.3)应该抛出错误', () => { function getIntArrayWrapFn() { functions.getIntArray(3.3); } expect(getIntArrayWrapFn).toThrow('"getIntArray"只接受整数类型的参数'); })

.toThorw可能够让我们测试被测试方法是否按照预期抛出异常,但是在使用时需要注意的是:我们必须使用一个函数将将被测试的函数做一个包装,正如上面getIntArrayWrapFn所做的那样,否则会因为函数抛出导致该断言失败。

.toMatch

// functions.test.js import functions from '../src/functions'; test('getAuthor().name应该包含"li"这个姓氏', () => { expect(functions.getAuthor().name).toMatch(/li/i); })

.toMatch传入一个正则表达式,它允许我们用来进行字符串类型的正则匹配。

5 测试异步函数

安装axios 这里我们使用最常用的http请求库axios来进行请求处理

npm install axios

编写http请求函数 我们将请求http://jsonplaceholder.typicode.com/users/1,这是由JSONPlaceholder提供的mock请求地址

JSONPlaceholder

// functions.js import axios from 'axios'; export default { fetchUser() { return axios.get('http://jsonplaceholder.typicode.com/users/1') .then(res => res.data) .catch(error => console.log(error)); } } // functions.test.js import functions from '../src/functions'; test('fetchUser() 可以请求到一个含有name属性值为Leanne Graham的对象', () => { expect.assertions(1); return functions.fetchUser() .then(data => { expect(data.name).toBe('Leanne Graham'); }); })

上面我们调用了expect.assertions(1),它能确保在异步的测试用例中,有一个断言会在回调函数中被执行。这在进行异步代码的测试中十分有效。

使用async和await精简异步代码

test('fetchUser() 可以请求到一个用户名字为Leanne Graham', async () => { expect.assertions(1); const data = await functions.fetchUser(); expect(data.name).toBe('Leanne Graham') })

当然我们既然安装了Babel,为何不使用async和await的语法来精简我们的异步测试代码呢? 但是别忘记都需要调用expect.assertions方法

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。