前言

最近公司要求使用uniapp开发跨平台项目，但是又没有人熟悉使用uniapp开发，没办法只能自己摸索学习。在摸索的过程中发现官方提供的自动化测试文档有问题，按照文档操作是不能成功创建项目的，这个问题已经在官方论坛和qq群反映过了，还没有收到回复。没办法只能自己探索如何融入单元测试框架了。

相信使用过uniapp开发的朋友们已经了解这个框架有什么样的问题，这里就不再提及了，内容只针对单元测试。

官方文档：（我查阅的时间是：20210402，这之后内容可能会更新） uniapp.dcloud.net.cn/collocation… 报错截图：

摘要

在uniapp框架下实现用jest进行h5环境的自动测试，不考虑其他平台。

正文

一、版本

1、hbuilder x的版本：3.1.7.20210330

2、nodejs版本：v14.15.3

3、npm版本：7.8.0

4、依赖包：依赖包只多不少，可能有多余的，没做测试。

"devDependencies": {
    "@babel/cli": "^7.13.14",
    "@babel/core": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "@vue/test-utils": "^1.1.3",
    "antd": "^4.15.0",
    "axios": "^0.21.1",
    "babel-core": "^6.26.3",
    "babel-jest": "^26.6.3",
    "babel-plugin-import": "^1.13.3",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "install": "^0.13.0",
    "jest": "^26.6.3",
    "npm": "^7.7.6",
    "vue": "^2.6.12",
    "vue-axios": "^3.2.4",
    "vue-jest": "^3.0.7",
    "vue-template-compiler": "^2.6.12",
    "vuex": "^3.6.2"
}

二、jest配置

1、修改mainfast.js

在mainfast.js中增加配置：

	"scripts": {
		"test": "jest --config test/jest.conf.js --coverage",
	},

test/jest.conf.js指向jest配置文件

2、在项目的根目录下新建test目录，目录里新建jest.conf.js、jest.setup.js文件和unit文件夹。目录结构如下图：

jest.conf.js内容如下：

const path = require('path');

module.exports = {
  rootDir: path.resolve(__dirname, '../'), // 类似 webpack.context
  moduleFileExtensions: [ // 类似 webpack.resolve.extensions
    'js',
    'json',
    'vue',
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1', // 类似 webpack.resolve.alias
  },
  transform: { // 类似 webpack.module.rules
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
  },
  setupFiles: ['<rootDir>/test/jest.setup.js'], // 类似 webpack.entry，这里指向jest.setup.js
  collectCoverage: true,
  coverageDirectory: '<rootDir>/test/coverage', // 类似 webpack.output
  collectCoverageFrom: [ // 类似 webpack 的 rule.include 不要用/开头！
    '**/*.{js,vue}',
    '!main.js',
    '!common/router/router.js',
    '!**/node_modules/**',
    '!unpackage/**',
    '!static/**',
  ],
  testURL: "http://192.168.31.15"  // 这里的地址是后端地址，在需要连接后端时使用，避免跨域报错。
};

备注：这里参考了其他博文的配置，并进行了修改。感谢各位大佬的知识分享！

jest.setup.js内容如下：

import Vue from 'vue';
import axios from "axios";
import Config from '@/config/config';

Vue.config.productionTip = false;


// 模拟uni对象，尽量模拟真实场景
window.uni = {};
let cache = {};

uni.getStorageSync = (key) => {
	return cache[key];
}

uni.setStorageSync = (key, value) => {
	cache[key] = value;
}

// 创建axios实例，代替uniapp框架的uni.request方法。
// 替换axios的适配器，避免跨域报错。
var path = require('path');
var lib = path.join(path.dirname(require.resolve('axios')),'lib/adapters/http');
var http = require(lib);
const service = axios.create({
    baseURL: Config.baseURL,
    timeout: 5000 ,// 请求超时时间
	adapter: http,
});

uni.request = (param) => {
	return service(param);
}

unit目录用来存放测试用例：

用例我就不写了，请参考jest官方文档，基本没有什么不同。

3、根目录修改.babelrc配置文件，增加以下配置项

{
	"env": {
		"test": {
			"plugins": [
				"transform-es2015-modules-commonjs",
				"syntax-dynamic-import"
			]
		}
	}
}

三、执行结果

有一个失败是故意的。

覆盖率报告如下：

后记

这种方式只是针对H5环境，微信小程序的方式还在研究，如果成功了还会再发一篇博文。

欢迎提意见，轻喷。