前端测试框架jest - 基于 vue 的快速入门

导语

我这边尽量一步一步介绍

jest 介绍

jest 是一个 javaScript 测试框架, 目的在确保任何 javaScript 代码的正确性。
大概有下面这些特性

• 零配置 — jest 的目标是在大部分 javaScript 项目上实现开箱即用, 无需配置
• 快照 — 能够追踪大型对象的测试
• 隔离 — 测试程序拥有自己独立的进程,以最大限度地提高性能
• 简易的api

创建一个vue 测试项目

我们这边使用 vue2 的vue-cli。 其实由于在创建的时候vue-cli 就会让我们选要不要测试框架,选好后,选jest作为我们的测试框架就好了。

是不是很简单

jest入门使用

toBe, toEqual, not

Jest使用“匹配器”让你以不同的方式测试值。 本文档将介绍一些常用的匹配器。

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

toBe 使用 Object.is 来判断是否正确。 如果你需要检查一个对象 , 可以使用 toEqual 来替代。

test('object assignment', () => {
 const data = {one : 1};
 data['two'] = 2;
 expect(data).toEqual({one : 1, two: 2});
})

我们还可以测试匹配器的反面：

test('adding positive numbers is not zero', () => {
  for (let a = 1; a < 10; a++) {
    for (let b = 1; b < 10; b++) {
      expect(a + b).not.toBe(0);
    }
  }
});

区分 undefined, null , false

• toBeNull 仅仅判断 null
• toBeUndefined 仅仅判断 undefined
• toBeDefined 与 toBeUndefined 相反
• toBeTruthy 匹配if语句视为true的任何内容
• toBeFalsy匹配if语句视为false的任何内容

test('null', () => {
 const n = null;
 expect(n).toBeNull();
})

数字

比较数字的大多数方法都具有匹配器等效项。

test('two plus two', () => {
    const value = 2 + 2;
    expect(value).toBeGreaterThanOrEqual(4)
})

对于浮点相等，请使用toBeCloseTo而不是toEqual，因为您不希望测试依赖于微小的舍入误差。

test('adding floating point numbers', () => {
  const value = 0.1 + 0.2;
  expect(value).toBeCloseTo(0.3);
});

字符串

可以使用toMatch根据正则表达式检查字符串

test('but there is a "stop" in Christoph', () => {
  expect('Christoph').toMatch(/stop/);
});

数组和可迭代数据

您可以使用toContain检查数组或可迭代项是否包含特定项：

const shoppingList = [
      'beer',
      'kleenex',
      'paper',
  ]
  test('the shopping list has beer on it', () => {
      expect(shoppingList).toContain('beer');
  })

例外

如果要测试特定函数在调用时是否引发错误，请使用toThrow。

function compileAndroidCode() {
  throw new Error('you are using the wrong JDK');
}

测试异步代码

在JavaScript中，异步运行代码是很常见的。 当您具有异步运行的代码时，Jest需要知道它所测试的代码何时完成，然后才能继续进行其他测试。 jest 有几种处理方法。

回调函数

最常见的异步模式是回调

假如, 你有一个 fetchData (callback) 函数, 该函数可获取一些数据并在完成后调用 callback。 你要测试此返回的数据是否为字符串 peanum butter

test('the data is peanut butter', () => {
  function callback(data) {
    expect(data).toBe('peanut butter');
  }

  fetchData(callback);
});

promises

如果您的代码使用Promise，则有一种更简单的方法来处理异步测试。 从测试中返回一个承诺，Jest将等待该承诺解决。 如果承诺被拒绝，则测试将自动失败。

例如，假设fetchData而不是使用回调，而是返回应为字符串’peanut butter’解析的Promise。 我们可以用以下方法进行测试：

test('the data is peanut butter', () => {
 return fetchData().then(data => {
  expect(data).toBe('peanut butter');
 })
})

Async/Await

或者, 你可以使用 async 和 await 在你测试用例中。 要编写异步测试, 得在传递给测试的函数前面使用 async 关键字。

test('the data is peanut' , async () => {
	const data = await fetchData();
    expect(data).toBe('peanut butter');
})

你可以结合 async和await与 .resolves 或者 .rejects

test('the data is peanut butter', async () => {
 await expect(fetchData()).resolves.toBe()
})

test('the fetch fails with an error', async () => {
  await expect(fetchData()).rejects.toThrow('error');
});

设置和拆除

通常在编写测试时, 你需要在测试运行之前进行一些设置工作, 而在测试运行后需要进行一些整理工作。 jest 提供了辅助功能来处理此问题

对许多测试重复设置

如果您有一些工作需要对许多测试重复进行，则可以使用beforeEach和afterEach。

beforeEach(() => {
    console.log('before')
})
afterEach(() => {
    console.log('after');
})
test('city', () => {
    expect(1).toBeTruthy();
})

一次性设置

beforeAll(() => {
    console.log('before')
})
afterAll(() => {
    console.log('after');
})

test('city' ,() => {
    expect(1).toBeTruthy();
})

test('n1', () => {
    expect(0).toBeFalsy();
})

mock 函数

模拟函数允许您通过擦除函数的实际实现，捕获对该函数的调用（以及在这些调用中传递的参数），捕获用new实例化的构造函数实例以及测试时间配置来测试代码之间的链接。 返回值。

有两种模拟函数的方法：通过创建要在测试代码中使用的模拟函数，或编写手动模拟来覆盖模块依赖性。

使用一个 mock 函数

假设我们正在测试forEach函数的实现，该函数将为提供的数组中的每个项目调用一个回调。

function forEach(items, callback) {
 for (let index = 0; index < items.length ; index ++) {
  callback(items[index]);
 }
}

为了测试此功能，我们可以使用模拟功能，并检查模拟的状态以确保按预期方式调用回调。

const mockCallback = jest.fn(x => 42 + x);
forEach([0, 1], mockCallback);

// The mock function is called twice
expect(mockCallback.mock.calls.length).toBe(2);

// The first argument of the first call to the function was 0
expect(mockCallback.mock.calls[0][0]).toBe(0);

// The first argument of the second call to the function was 1
expect(mockCallback.mock.calls[1][0]).toBe(1);

// The return value of the first call to the function was 42
expect(mockCallback.mock.results[0].value).toBe(42);