vue的jest单元测试安装使用流程

TDD（测试驱动）、BDD（行为驱动）在平日里都听说过啦。那么如何在前端vue项目使用呢？下面是vue-jest单元测试的安装和使用简易流程。

1. 依赖安装

相关依赖根据vue-jest的package.json文件，查看依赖包的版本限制如何。从peerDependencies属性可以看出，对应的依赖版本限制如下：

进行安装版本要求内的对应的依赖包: babel-jest、jest、ts-jest。

npm i babel-jest@26.0.0 jest@26.0.0 ts-jest@26.4.4 -D

接着还需要安装测试库以及其他的依赖包，这类依赖包可以安装最新的版本

npm i @vue/babel-preset-app @testing-library/vue@next @testing-library/user-event @testing-library/jest-dom @types/jest vue-jest@next @vue/test-utils@next -D

关于测试库的更详细的使用指导可以根据官网的资料学习: Testing Library、Vue Test Utils、Jest。

2. 相关配置

（1）jest.config.js的相关基础配置

module.exports = {
	roots: [
		'<rootDir>/vue/src/', // 目标根路径
	],
	testMatch: [
		'<rootDir>/vue/src/**/__tests__/**/*.{vue,js,jsx,ts,tsx}',
		'<rootDir>/vue/src/**/*.{spec,test}.{vue,js,jsx,ts,tsx}',
	],
	testEnvironment: 'jsdom',
	transform: {
		'^.+\\.(vue)$': '<rootDir>/node_modules/vue-jest',
		'^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
	},
	transformIgnorePatterns: [
		'<rootDir>/node_modules/',
		'[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
		'^.+\\.module\\.(css|sass|scss|less)$',
	],
	moduleFileExtensions: [
		'vue',
		'js',
		'jsx',
		'ts',
		'tsx',
		'json',
		'node',
	],
	resetMocks: true,
  };

（2）babel.config.js的相关配置

为了不影响其他环境的presets和plugins的配置，根据测试环境下返回要使用的presets和plugins

module.exports = api => {
	const isTest = api.env('test');
	// You can use isTest to determine what presets and plugins to use.
	if(isTest) {
		return {
			presets: [
				'@vue/app',
			],
		};
	}
	return {};
};

（3）package.json的相关配置

在script属性下的增加运行测试指令:

  "scripts": {
    "jest": "jest \/src --watch"
  },

3. 测试单文件SFC

TreeSelectCascader.vue

<template>
  <div class="cascader">
    <div class="popover-wrapper" v-if="popoverVisible" data-test="TreeSelectCascader">
      <TreeSelectCascaderItem :sourceItem="source" :height="height" :selected="selected" @update:selected="onUpdateSelected" />
    </div>
    result: {{ result }}
  </div>
</template>

TreeSelectCascader.spec.ts

import TreeSelectCascader from "../TreeSelectCascader.vue";
import { mount } from "@vue/test-utils";

test('TreeSelectCascader: ', async () => {
  // 挂载组件
  const wrapper = mount(TreeSelectCascader);

  // 获取组件是否挂载
  const textNode = await wrapper.get('[data-test="TreeSelectCascader"]');
  expect(textNode).toBeTruthy();

})

4. 运行测试用例

执行package.json下的scripts属性下配置好的jest指令：

npm run jest

也可以通过npx运行

npx jest src --watch

测试用例执行后的结果：