Jest 环境搭建与配置

插件安装

推荐安装 Jest 、JestRunner、Jest Snippets 插件（vscode）

image-20230830145153501

安装

注意：要将 npm 切换为淘宝源，否则安装容易报错，且 node 版本为 14 以上

npm config set registry https://registry.npm.taobao.org

命令行：推荐直接 copy 对应依赖及版本

npm install --save jest @vue/test-utils babel-jest vue-jest babel-jest…………

"dependencies": {
    ......
	"@vue/test-utils": "^1.0.3",
	"babel-jest": "^29.6.2",
	"babel-core": "^7.0.0-bridge.0",
    "babel-plugin-import": "^1.13.3",
	"@vue/vue2-jest": "^29.2.5",
	"jsdom": "^22.1.0",
	"jsdom-global": "^3.0.2",
	"jest": "^29.6.2",
	"vue-jest": "^3.0.7"
}

Jest 配置项（根目录新建）

jest.setup.js 文件

require("jsdom-global")();

jest.config.js 文件

const path = require("path");
module.exports = {
	rootDir: path.resolve(__dirname, "./"), // 根据自己项目来
	moduleFileExtensions: ["js", "json", "vue"],
	transformIgnorePatterns: ["/node_modules/"],
	testEnvironment: "node",
	collectCoverage: true, // 是否生成代码覆盖率报告，以及控制台是否打印覆盖率日志
	collectCoverageFrom: ["**/src/components/**/*.{js,vue}"], // 设置要生成代码覆盖率报告的目录和文件
	testRegex: "(/tests/.*\\.(test|spec))\\.[tj]sx?$", //测试文件的地址配置
	transform: {
		"^.+\\.js$": "<rootDir>/node_modules/babel-jest", //告诉 Jest 用 babel-jest 处理 JavaScript 测试文件
		".*\\.(vue)$": "<rootDir>/node_modules/vue-jest" //告诉 Jest 用 vue-jest 处理 .vue 文件
	},
	moduleNameMapper: {
		"^@/(.*)$": "<rootDir>/$1"
	},
	setupFiles: ["<rootDir>jest.setup.js"], //启动jest需要的文件
	testEnvironmentOptions: {
		url: "http://localhost"
	}
};

常用命令

npx jest                     # 运行全部测试
npx jest --coverage          # 运行并生成覆盖率报告
npx jest toFixed             # 按文件名关键字运行某个测试
npx jest --watch             # 监听模式，文件变动自动重新运行（配合 Git 使用 --watchAll）
npx jest -t "测试登录"        # 按用例名称运行