脚本宝典收集整理的这篇文章主要介绍了使用Jest测试JavaScript (入门篇)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

npm inIT -y

npm install -D jest babel-jest babel-core babel-PReset-env regenerator-runtime

{
  "presets": ["env"]
}

"scripts": {
  "test": "jest"
}

• 在项目根目录下创建src目录，并在src目录下添加functions.js文件
• 在项目根目录下创建test目录，并在test目录下创建functions.test.js文件
@H_406_167@

Jest会自动找到项目中所有使用.sPEc.js或.test.js文件命名的测试文件并执行，通常我们在编写测试文件时遵循的命名规范：测试文件的文件名 = 被测试模块名 + .test.js，例如被测试模块为functions.js，那么对应的测试文件命名为functions.test.js。

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

export default {
  sum(a, b) {
    return a + b;
  }
}

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

xpect(functions.sum(2, 2)).toBe(4); })" title="" data-original-title="复制">

import functions  From '../src/functions';

test('sum(2 + 2) 等于 4', () => {
  expect(functions.sum(2, 2)).toBe(4);
})

运行npm run test, Jest会在shell中打印出以下消息：

 PASS  test/functions.test.js
  √ sum(2 + 2) 等于 4 (7ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.8s

4.常用的几个Jest断言

上面测试用例中的expect(functions.sum(2, 2)).toBe(4)为一句断言，Jest为我们提供了expect函数用来包装被测试的方法并返回一个对象，该对象中包含一系列的匹配器来让我们更方便的进行断言，上面的toBe函数即为一个匹配器。我们来介绍几种常用的Jest断言，其中会涉及多个匹配器。

.not

//functions.test.js
import functions  from '../src/functions'

test('sum(2, 2) 不等于 5', () => {
  expect(functions.sum(2, 2)).not.toBe(5);
})

.not修饰符允许你测试结果不等于某个值的情况，这和英语的语法几乎完全一样，很好理解。

.toEqual()

// functions.js
export default {
  getAuthor() {
    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

button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 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; } }" title="" data-original-title="复制">

// 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请求地址



LOG(error)); } }" title="" data-original-title="复制">

// 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】 Jest官方文档(https://jestjs.io/zh-Hans/)
【2】 Jest Crash Course - Unit Testing in JavaScript(https://www.youtube.com/watch...

脚本宝典总结

以上是脚本宝典为你收集整理的使用Jest测试JavaScript (入门篇)全部内容，希望文章能够帮你解决使用Jest测试JavaScript (入门篇)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。