工具 – Vitest 与单元测试

前言

Vitest 是一款配搭 Vite 的前端单元测试工具，可以用于取代 Jasmine 和 Jest。

我先聊一下测试，每当添加新代码或修改旧代码后，我们多少都得测试一下，以确保功能正确才能交付。

这种测试通常只是写几个简单的调用，换换参数，console 看看输出。没有问题也就 ok 了。

大部分情况下并不需要用到工具。但是如果我们经常要添加或修改同一份代码的话（比如维护一个库），这种测试就变得非常繁琐，

每改一次就得重新测一遍，多麻烦啊，这时就需要一些测试工具来帮忙了。

测试工具的工作就是把我们上面原本随意写的调用，换参数，console 变成一种规范，并且用代码写好封存起来。每一次只要一个 command 所有测试都会重跑一遍。

参考

YouTube – Jest Crash Course Jest 基本用法

YouTube – Why Vitest Is Better Than Jest Vitest 取代 Jest

Unit Test vs e2e Test

unit test 单元测试指的是很小单元的测试。比如测试一个方法。

用人工测试的话，它的过程是调用方法，console 看看 result。

e2e (end-to-end) 测试的是 final UI。比如一个 login 过程。

用人工测试的话，它的过程是进入页面，填 form，submit。查看结果。

单元测试是我们在写代码时做的小测试。e2e 则是我们完成了一个小组件/页面后对整体的一个最终测试。

傻傻分不清的测试工具

Jasmine 是最古老的单测代码。

Karma 也很古老，它是运行 Jasmine 的环境 (Angular2 默认就是 Jasmine + Karma 做单元测试，但最近 Karma 已经被淘汰了)

Jest 的单测代码和 Jasmine 雷同，同时它具备 Karma 运行环境的能力。所以单单一个 Jest 就可以完成单元测试了。它是 Facebook 出品，在 React 生态很火的。

Vitest 和 Jest 雷同，单侧代码也和 Jasmine 雷同，也具备运行环境。所以它可以完全替代 Jest。它是 Vue 生态，基于 Vite 的单侧工具。

jsdom 一般上，Jest 和 Vitest 都是用 Node.js 测试 JavaScript。如果涉及到 DOM、BOM 需要搭配 jsdom。它和 Jest 是同一个生态的，但 Vitest 也是可以用它。

Protractor 是 e2e 测试工具。Angular2 默认用它，但目前已经被淘汰了。

Cypress 是 e2e 测试工具，可以用来替代 Protractor。

Mocha 类似 Jest、Vitest。但比较轻，不完善。Cypress 是基于 Mocha 的哦。

Jasmine vs Jest vs Vitest

Jasmine 比较古老一些。以前我写 Angular 时也玩过它。虽然它古老，但也不过时，因为所有的测试工具使用方式和语法都大同小异。你会了一个再学另一个只是分分钟的事情。

题外话：目前 Angular 默认使用 Jasmine + Karma 做测试，v16 后也支持 Jest + jsdom，而随着 Karma 被丢弃了，未来默认会改成 Jasmine + Web Test Runner，想了解更多可以看这两篇。

Angular Testing in 2023 - Past, Present, and Future

Docs – Moving Angular CLI to Jest and Web Test Runner

Jest 是 Facebook 出的，伴随 React，所以它目前是最受欢迎的。但它有一个缺点，那就是对 ES Module 支持还不够完善。Github – Meta: Native support for ES Modules

Vitest 则属于 Vue、Vite 生态。比较新，非常适合搭配 Vite 来使用。

选择

没什么好选的，你用 React 就用 Jest，用 Vue 就用 Vitest，用 Angular 就 Jasmine。语法都差不多的。你看一下 Jest migrate to Vitest 就体会到了。

Get Started

follow Vite 教程 创建一个项目。

安装 Vitest

yarn add vitest --dev

module & test module

创建 core.ts 和 core.test.ts

core.ts 是我们的逻辑代码，core.test.ts 是我们的测试代码。测试文件的命名规范是加一个 '.test' 在中间。

JavaScript 一个 file 等于一个 module，通常我们是 1 个 module file 对应一个 test file。

core.ts

function sum(...numbers: number[]): number {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

我们写一个简单的 sum 方法，功能是把所有传入的数目累加起来。

core.test.ts

如果没有使用测试工具，我们大概会这样测试。

写一段

const value = sum(1, 2, 3);
console.log(value); // 6

然后用游览器或 Node.js 运行一下，看看 log 出来的结果是不是 6，是的话就 ok 了，测试代码可以删了，happy ending。

直到某天发现 sum 的实现有问题 (maybe 性能)，我们修改了 sum 的代码，然后呢，我们就得再写一遍测试代码，再运行看看结果。这就是一个重复性的低能工作。

那使用测试工具呢？

core.test.ts 代码长这样

import { describe, it, expect } from "vitest";
import { sum } from "./core";

describe(`test 'sum' function`, () => {
  it("should return sum of numbers", () => {
    const value = sum(1, 2, 3);
    expect(value).toBe(6);
  });

  it("should return zero when no passing any numbers", () => {
    const value = sum();
    expect(value).toBe(0);
  });
});

我们一个一个看

describe 是我们要测试的单元，这个颗粒度是我们自己决定的，例子中就是测试 sum 这个方法。（注: describe 允许嵌套。所以我们可以任意去 grouping 分组）

it 是我们要测试的 condition。比如同一个方法，我们要测试多种不同的参数调用。那么每一个 it 就表示一种不同的 "情况"

expect 是我们期望的结果。在每一个 it 中，我们可能有多个 expect，上面例子比较简单，所以只有一个 expect，下面会有更复杂的例子。

测试代码写好后，我们运行 command

yarn vitest

效果

绿色勾勾表示测试成功！

假如，sum 的代码写得不对。

运行测试的结果

各种错误信息。

至此，我们成功把测试封装了起来，以后即便修改 sum 的代码，我们也不需要重复写测试咯~

expect

expect 跟随着许多验证的方式

toBe

它是 Object.is

expect("1").toBe("1"); // pass
expect("1").toBe(1); // fail
expect({}).toBe({}); // fail
expect([]).toBe([]); // fail
expect(NaN).toBe(NaN); // pass
expect(0).toBe(-0); // fail

toEqual

equal 适合用于 array 和 object 的对比，不看指针，看值。

expect([1, 2, 3]).toEqual([1, 2, 3]); // pass
expect({ values: [1, 2, 3] }).toEqual({ values: [1, 2, 3] }); // pass
expect(1).toEqual("1"); // fail

它只是把引用类型当值类型对比，可没有自动转换类型哦。

toBeTruthy & toBeFalsy

expect(true).toBeTruthy(); // pass
expect(1).toBeTruthy(); // pass
expect("0").toBeTruthy(); // pass
expect([]).toBeTruthy(); // pass
expect({}).toBeTruthy(); // pass

expect(false).toBeFalsy(); // pass
expect(undefined).toBeFalsy(); // pass
expect(null).toBeFalsy(); // pass
expect("").toBeFalsy(); // pass
expect(0).toBeFalsy(); // pass

它会自动转换类型，类似于 if (value)

toBeNull、toBeUndefined、toBeNaN

expect(NaN).toBeNaN();
expect(null).toBeNull();
expect(undefined).toBeUndefined();

它没有 toBeNullOrUndefined 哦。可以这样实现

expect(null == null).toBeTruthy();
expect(undefined == null).toBeTruthy();

only、skip

it 和 describe 都有 .only 和 .skip 方法。

it.only("test1", () => {
  expect(1).toBe(1);
});

it("test2", () => {
  expect(1).toBe(1);
});

这个 file 只有 it.only 会执行测试。

it.skip("test1", () => {
  expect(1).toBe(1);
});

it("test2", () => {
  expect(1).toBe(1);
});

it("test3", () => {
  expect(1).toBe(1);
});

skip 表示不执行这个测试，其它的都执行。

before、after

beforeEach、afterEach 会在每一个 it 执行前触发，我们可以用来做初始化，或者 reset shared variable 等等。

describe(`test 'sum' function`, () => {
  let sharedValue = 0;
  beforeEach(() => {
    sharedValue = 0;
  });
  afterEach(() => {
    sharedValue = 0;
  });

  it("should return sum of numbers", () => {
    const value = sum(1, 2, 3);
    expect(value).toBe(6);
  });

  it("should return zero when no passing any numbers", () => {
    const value = sum();
    expect(value).toBe(0);
  });
});

beforeAll、afterAll 则只会触发一次。

Mock

mock 是模仿/模拟的意思。模仿什么呢？函数。我们看例子体会。

mock callback function for test caller

我们有一个 forEach 的函数，它接收一个 callback function，在 looping 时把当前 value 和 index 传入到 callback 中

export function forEach<T>(
  values: T[],
  callbackfn: (value: T, index: number) => void
): void {
  for (let index = 0; index < values.length; index++) {
    const value = values[index];
    callbackfn(value, index);
  }
}

我们要测试 callback funcion 是否正确被调用。

describe(`test 'forEach' function`, () => {
  it("should call callbackfn with correct parameters", () => {
    var values = ["a", "b", "c"];

    const callbackfn = vi.fn(); // mock 一个 callback function，它算是一个 proxy 函数，它除了可以调用之外，还有 tracking 信息

    forEach(values, callbackfn); // 执行 forEach，执行完后，我们的 callbackfn 就有了调用的数据

    expect(callbackfn).toBeCalledTimes(3); // 查看是否被调用了 3 次
    expect(callbackfn).nthCalledWith(1, "a", 0); // 第一次调用时，传入的 parameters 是否是 'a', 0
    expect(callbackfn).nthCalledWith(2, "b", 1);
    expect(callbackfn).nthCalledWith(3, "c", 2);

    // mock 有许多数据可以用，上面都是一些封装好，常用到的验证，如果我们要更多的验证可以直接访问 mock 内的数据
    // 等价于 .toBeCalledTimes(3)
    expect(callbackfn.mock.calls.length).toBe(3);
    // 等价于 .nthCalledWith(1, "a", 0)
    expect(callbackfn.mock.calls[0][0]).toBe("a");
    expect(callbackfn.mock.calls[0][1]).toBe(0);
  });
});

mock function for cut off dependence（斩断依赖关系）

我们想测试函数 A，但函数 A 内部依赖了函数 B。假如函数 B 的代码有问题，那将导致函数 A 也测试失败。这样就很乱。所以要斩断依赖。

单元测试就要确保测试足够 "单元"，不可以有依赖，怎么斩断依赖呢？答案是 mock 函数 B。

export function generateNextNumber(random: () => number): number {
  return random() + 1;
}

generateNextNumber 依赖了一个 random 函数。

const random = vi.fn(); // mock random
random.mockReturnValue(10); // 配置 random 将返回 number 10
const value = generateNextNumber(random); // 调用 generateNextNumber
expect(value).toBe(11); // 最终 10 + 1 = 11

通过 mockReturnValueOnce 我们还可以指定每一次返回值都不一样。

const random = vi.fn();
random.mockReturnValueOnce(10).mockReturnValueOnce(20);
expect(random()).toBe(10);
expect(random()).toBe(20);

mock module by spyOn

上面 random 函数是通过参数传进去的，如果它不是参数而是 import from another module 我们如何 mock 呢？

这时需要 spyOn

import { it, expect, vi } from "vitest";
import { generateNextNumber } from "./core";
import * as shared from "./shared";

const random = vi.spyOn(shared, "random");
random.mockReturnValue(10);

it("test", () => {
  expect(generateNextNumber()).toBe(11);
});

spyOn 可以 mock 一个对象中的方法。

mock inner function

参考: Stack Overflow – Jest mock inner function

在同一个 file 里，函数间有依赖。这个不能直接 spyOn mock。因为 funcA 直接调用 funcB 的。

解决方法有 2 个，第一个是把 funcB 移出去另一个 file。

第二个是不要直接调用 funcB，改成 import self 调用

这样就可以 spyOn mock 了。

mock localStorage

Vitest by default 的环境是 Node.js。如果我们代码有用到 DOM、BOM 的话需要借助 jsdom

yarn add jsdom --dev

vite.config.ts

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
  },
});

它和 Vite 公用同一个 config file，但 import 改成 vitest/config。.

下面这个函数依赖了 localStorage

export function generateNextNumber(): number {
  const currentNumber = +localStorage.getItem("currentNumber")!;
  return currentNumber + 1;
}

测试代码

import { it, expect, vi } from "vitest";
import { generateNextNumber } from "./core";

const getItem = vi.spyOn(Storage.prototype, "getItem");
getItem.mockReturnValue("10");

it("test", () => {
  expect(generateNextNumber()).toBe(11);
});

Vitest UI

如果看不惯 command line 的 test message。Vitest 还有 UI 版本哦。

安装

yarn add @vitest/ui --dev

在启动 command 加上 --ui 就可以了

vitest --ui

效果

Debug Mode

在 test file 打断点。

开启 JavaScript Debug Terminal

运行 yarn vitest 就可以了

效果