Logo Vincent
返回文章列表

小巧的JS测试框架:AVA

Web
小巧的JS测试框架:AVA

【前言】

常见的JS测试框架有Jest,Mocha等,

今天介绍一个小巧的JS测试框架:ava,

https://github.com/avajs/ava

【安装】

安装比较简单,如下

npm i -D ava

安装后,添加npm脚本,如下

{
	"name": "awesome-package",
	"type": "module",
	"scripts": {
		"test": "ava"
	},
	"devDependencies": {
		"ava": "^5.0.0"
	}
}

【配置文件】

ava支持在package.json中添加ava的配置,

或者使用ava.config.js进行配置,如下,

module.exports = {
  files: ["!__tests__/**/*"],
  match: [],
  concurrency: 5,
  failFast: true,
  failWithoutAssertions: false,
  environmentVariables: {
    MY_ENVIRONMENT_VARIABLE: "some value",
  },
  verbose: true,
  require: [],
  nodeArguments: ["--trace-deprecation"],
};

配置文件的详细使用可以看这里:

https://github.com/avajs/ava/blob/main/docs/06-configuration.md

【测试用例】

ava支持常见的测试用例,

普通的测试用例

// ava
const test = require("ava");

// test 1
test("test 1", (t) => {
  t.pass();
});

多个测试用例并行执行

// ava
const test = require("ava");

// test 1
test("test 1", (t) => {
  t.pass();
});

// test 2
test("test 2", (t) => {
  t.pass();
});

多个测试用例串行执行

// ava
const test = require("ava");

// test 1
test("test 1", (t) => {
  t.pass();
});

// test 1-1
test.serial("test 1-1", (t) => {
  t.pass();
});

// test 2
test("test 2", (t) => {
  t.pass();
});

支持promise测试用例

// ava
const test = require("ava");

// q
const { isExists } = require("../../index.js");

// test promise
test("test promise", (t) => {
  const fpath = "/path/not/exists";
  return isExists(fpath).then((result) => {
    t.falsy(result);
  });
});

支持async / await测试用例

// ava
const test = require("ava");

// q
const { isExists } = require("../../index.js");

// test promise
test("test promise", async (t) => {
  const fpath = "/path/not/exists";
  const res = await isExists(fpath);
  t.falsy(res);
});

支持只运行某一个测试用例

// ava
const test = require("ava");

// test 1
test("test 1", (t) => {
  t.pass();
});

// test 2
test.only("test 2", (t) => {
  t.pass();
});

支持跳过某一个测试用例

// ava
const test = require("ava");

// test 1
test("test 1", (t) => {
  t.pass();
});

// test 2
test("test 2", (t) => {
  t.pass();
});

// test 3
test.skip("test 3", (t) => {
  t.fail();
});

支持todo某一个测试用例

// ava
const test = require("ava");

// test 1
test("test 1", (t) => {
  t.pass();
});

// test 2
test("test 2", (t) => {
  t.pass();
});

// test 3
test.skip("test 3", (t) => {
  t.fail();
});

// test 4
test.todo("test 4");

支持失败的测试用例

// ava
const test = require("ava");

// test 1
test("test 1", (t) => {
  t.pass();
});

// test 2
test("test 2", (t) => {
  t.pass();
});

// test 3
test.skip("test 3", (t) => {
  t.fail();
});

// test 4
test.todo("test 4");

// test 5
test.failing("test 5", (t) => {
  t.fail(); // Test will count as passed
});

支持before,after等钩子

在所有测试用例之前执行的before钩子

// ava
const test = require("ava");

// before
test.before(() => {
  console.log("before 1");
});

// test
test("test 1", (t) => {
  t.pass();
});
test("test 2", (t) => {
  t.pass();
});
test.serial("test serial", (t) => {
  t.pass();
});

在所有测试用例之前执行的串行before钩子

// ava
const test = require("ava");

// serial before
test.serial.before(() => {
  console.log("before serial 1");
});

// test
test("test 1", (t) => {
  t.pass();
});
test("test 2", (t) => {
  t.pass();
});
test.serial("test serial", (t) => {
  t.pass();
});

在所有测试用例之后执行的after和after always钩子

// ava
const test = require("ava");

// after
test.after(() => {
  console.log("after");
});
test.after.always(() => {
  console.log("after always");
});

// test
test("test 1", (t) => {
  t.pass();
});
test("test 2", (t) => {
  t.pass();
});
test.serial("test serial", (t) => {
  t.pass();
});

支持测试用例上下文

// ava
const test = require("ava");

test.beforeEach((t) => {
  t.context.data = "foo";
});

test("context data is foo", (t) => {
  t.is(t.context.data + "bar", "foobar");
});

支持测试用例使用宏

// ava
const test = require("ava");

function macro(t, input, expected) {
  t.is(eval(input), expected);
}

test("2 + 2 = 4", macro, "2 + 2", 4);
test("2 * 3 = 6", macro, "2 * 3", 6);

【执行上下文t】

测试用例的回调函数中的t,

是执行上下文,

title:测试用例标题

context:测试用例上下文

passed:测试用例是否通过

log方法:打印日志,替代console.log

// ava
const test = require("ava");

// test
test("test", (t) => {
  t.log(t.title);
  t.log(t.context);
  t.log(t.passed);
  t.pass();
});

【断言】

支持常见的断言,如下

【支持设置超时时间】

// ava
const test = require("ava");

// test
test("test", async (t) => {
  t.timeout(1);

  await hello();
  t.pass();
});

function hello() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 1000);
  });
}

【总结】

ava虽然小巧,但是使用很方便

1.强大的配置文件

2.强大的测试用例

3.强大的钩子和宏

4.强大的断言

5.强大的命令行

感兴趣的可以继续探索下,

https://github.com/avajs/ava/tree/main/docs

相关推荐

规范的代码提交:Conventional Commits

【前言】 本文介绍如何提交规范的commit msg, 规范的commit msg可以看这个网站: https://www.conventionalcommits.org/en/v1.0.0/ 【commitizen】 可以手动提交符合规范的commit msg,如下 手动提交符合规范的msg比较麻

一篇文章开发todolist

【前言】 本文实战开发一个todolist, 基于以下技术栈: react:开发ui, https://reactjs.org/ webpack,构建前端项目, https://webpack.js.org/ localStorage,存储数据, https://developer.mozilla.

一篇文章学会IndexedDB

【简介】 IndexedDB,web端可以直接使用的数据库,详见: https://developer.mozilla.org/zhCN/docs/Web/API/IndexedDB\API 【IndexedDB vs LocalStorage】 之前介绍了LocalStorage:一篇文章学会lo

初始化前端Monorepos项目

【前言】 本文记录初始化一个前端Monorepos项目的过程 【LICENSE】 如果是开源项目, 需要添加LICENSE, 一般推荐使用MIT LICENSE, 模板如下, 其中copyright那一行, 可以替换为自己的信息。 【git】 git的一些基础设置 设置git账号信息 配置gitig

一篇文章判断用户是否在线

【前言】 如何判断用户在线,而不是用户网络是否连通, 在线:连网,可以访问internet 连通:连网,不能访问internet 【是否在线】 如上,判断是否在线,需要检测是否可以访问internet nodejs 在nodejs下,可以通过ping一些常见的域名来确定, 这里封装了一个工具, ht

一篇文章学会LocalStorage

【简介】 LocalStorage,即本地存储,详见: https://developer.mozilla.org/zhCN/docs/Web/API/Window/localStorage 【cookie vs LocalStorage】 服务端是否可以获取? cookie:服务端可以获取,每次请

mantine-ui快速上手

【前言】 2023年,前端开发的ui框架应该用哪个呢, 一些基本的诉求: 1.支持pc和移动端 2.支持黑夜&白天主题切换 3.组件丰富 4.支持react 4是技术栈选择,非通用 按以上要求在github上快速搜索下react相关ui库, 从start数,issues数,最后commit时间等维度

前端Monorepos项目使用npm-workspaces

【前言】 之前一直使用 lerna 来管理前端 monorepos 项目, 今天升级 lerna 后发现不支持 bootstrap 命令了, 替换为了 npm 的 workspaces 相关命令。 【lerna bootstrap】 lerna 的相关使用可以看这篇文章, 一文学会用Lerna管理多

Nx-VS-Lerna

【前言】 nx和lerna都是优秀的monorepos工具, 本文来对比一下两者的不同, https://nx.dev/ https://lerna.js.org/ 对比之前可以先看下面两篇文章, 了解nx和lerna的基本使用, 一文学会用Lerna管理多个npm包 强大的构建系统:NX 【任务执

强大的构建系统:NX

【前言】 nx是一个强大的构建系统, 这么说可能比较模糊, 本文实践一个项目,带大家了解nx, 感兴趣的也可以自己探索: https://nx.dev/ nx一些典型的应用场景: 1.基于package的monorepo管理 2.完整的前端项目管理 3.react,angular等项目管理 4.no

一篇文章了解JS并行任务

【前言】 在开发过程中大部分场景是顺序执行代码, 也有场景要求并行执行多个任务, 本文研究下如何高效的并行执行任务。 【并行场景】 常见并行执行任务的场景 1.并行执行多个请求 2.并行下载文件 【并行任务】 上述场景中任务的共同点是 1.多个任务没有依赖关系 2.多个任务完成耗时不确定 3.要求最

一篇文章学会Webpack5.x

【前言】 Web前端构建离不开webpack, 众所周知webpack的配置很多很复杂, 甚至可以设置“webpack配置工程师”, 本文抓住webpack核心概念, 和业务开发中常用配置进行讲解, 争取一篇文章学会webpack使用和配置。 【常用文档】 webpack官网 webpack手册:可

© 2026 vincentqiao.com . 保留所有权利。