前端单元测试入门（Jest）

开始

Jest是由Facebook发布的开源的、基于Jasmine的Javascript的单元测试框架。官方文档在这里。

安装：

npm install --save-dev jest

然后创建一个sum.js文件，输出一个方法：

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

然后，创建一个名为sum.test.js的文件。这将包含我们的实际测试︰

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

然后将下面的配置部分添加到你的package.json里面：

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

然后就可以通过npm run test来启动单元测试，测试结果：

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

webstorm增加Jest语法提示

WebStorm → Preferences → Languages & Frameworks → JavaScript → Libraries, 点击Download然后找到列表页中的Jest, 然后点击Download and Install.

匹配器

Jest通过匹配器来测试方法的结果是否符合预期，完整的API列表在这里。

普通匹配器

最简单的测试值的方法是看是否精确匹配

test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});

• expect的用处调用被测试的函数或者方法，返回一个结果
• toBe就是匹配器，判断结果和期望是否相等

toBe使用的是Object.is()判断相等，如果要检查对象的值，需要使用toEqual

test('object', () => {
  let obj = {value: 'a'};
  expect(obj.value).toEqual('a')
});

真假值

JS中，undefined、null、false有时需要区分，有时不需要，所以Jest提供了下面的API来进行匹配：
- toBeNull：只匹配null
- toBeUndefined：只匹配undefined
- toBeDefined：与toBeUndefined相反
- toBeNull：只匹配null
- toBeTruthy：匹配任何if语句为真
- toBeFalsy：匹配任何if语句为假

数字

对于数字有各种等价的匹配器
- toBe：=
- toEqual：=
- toBeGreaterThan：>
- toBeGreaterThanOrEqual：≥
- toBeLessThan：<
- toBeLessThanOrEqual：≤

对于浮点数，应该使用toBeClose而不是toEqual

test('两个浮点数字相加', () => {
  const value = 0.1 + 0.2;
  //expect(value).toBe(0.3); 这句会报错，因为浮点数有舍入误差
  expect(value).toBeCloseTo(0.3); // 这句可以运行
});

字符串

使用toMatch来验证字符串中是否包含指定的字符串或者正则表达式

test('this is a joe in the sentence?', () => {
  expect('this is joe').toMatch(/joe/)
});

数组

使用toContain来验证数组中是否包含匹配子项

test('the Array contains the item?', () => {
  const arr = ['a', 'n', 'cc'];
  expect(arr).toContain('cc')
});

异常

如果一个函数在某些情况下会抛出错误，Jest也可以对这种情况进行预期，使用的API是toThrow

function fn() {
  throw new Error('this is a error')
}

test('function will throw an error', () => {
  expect(fn).toThrow();
  expect(fn).toThrow(Error);

  expect(fn).toThrow('this is a error');
  expect(fn).toThrow(/is/);
});

完整的API列表在这里。