基于 Laravel 的 Vue test 前端单元测试流程

自从 Laravel 整合 Vue 以后,开发前端组件变的更简单了,对于一个有强迫症的程序员来讲,单元测试是必不可少的。

Laravel 官方文档中关于单元测试方面只有 phpunit 的相关示例,并没有前端相关,而且 Laravel 不是直接用 webpack,是用了 Laravel-Mix 的中间件,网上对应的文章较少,自己研究的过程中,踩了不少坑,这里把基于 Laravel 的前端单元测试用例流程部署简单整理出来。

我本地用的环境如下

  • Laravel Version: 5.6.39
  • PHP Version: 7.2.10
  • Yarn Version: 1.13.0
  • Laravel Mix Version: ^2.0

1、安装 vue-test-utils 及相关依赖

yarn add mocha mocha-webpack jsdom jsdom-global expect vue-test-utils --dev

2、全局配置

  1. Laravel 的测试用例统一在 tests 目录下,都是 php 文件,我们增加一个 Vue 目录来专门放前端的测试用例,js 的测试用例一般用 spec.js 统一结尾;
  2. 增加文件 test/Vue/setup.js 用来全部配置,这里有个坑,要加上 window.Date 那句,才不会报错,这个问题困扰了我一上午时间。。。
// setup.js
require('jsdom-global')();
global.expect = require('expect');
window.Date = Date; // temporary bug fix, should be removed after vue-test-utils fixes #936

3、增加相关脚本

package.json 里增加一个测试 script 如下

"test": "cross-env NODE_ENV=testing mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js",

4、写测试用例

这里,我们把测试用例我们统一放在 tests/Vue/Unit 下面,Unit/ExampleComponent.spec.js 内容如下

import {mount} from 'vue-test-utils'
import expect from 'expect'
import Example from '../../../resources/assets/js/components/ExampleComponent.vue'

describe('Example', () => {
  let component

  beforeEach(() => {
    component = mount(Example)
  })

  it('contains example', () => {
    expect(component.html()).toContain('Example Component')
  })

})

上面是测试用例的判定规则,这里只讲流程,不讲具体的,大家有需要去看 vue-test-utils 的官方文档

5、跑一下试试

按网上的教程,到这里应该可以跑了,本地测试一下

$ yarn test

实际过程中,这里还有一个坑,因为 laravel-mix 的原因,这里跟 mix.extract 方法有冲突,所以我们要修改 webpack.mix.js 配置文件,判断当执行测试的时候,不进行 extract 操作,相关如下:

if (process.env.NODE_ENV !== 'testing') {
    mix.extract(['vue']);
}

好了,这里应该可以跑起来了,成功后的截图如下:
file

以上是我的整个踩坑流程,希望对大家有帮助!

参考链接

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 1
陈伯乐

折腾了两天才搞定代码覆盖测试,Laravel Mix 依赖真不是一般的有问题,记录下来,有需要的同学看这里
https://github.com/bolechen/laravel-vue-test-use-mocha-nyc

2周前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!

社区文档:

将托管在 packagist.org 和 github.com 的扩展包使用国内 CDN 加速
GitHub Laravel 扩展包 TOP 250
速查表方便快速查询框架功能,支持手机访问,支持中英文版本
Laravel 中文文档,由社区用户翻译和维护,将会保持一直更新
此文档的目的,就是为了提高技术团队的凝聚力、一致性和生产效率。
开发环境的部署,开发者工具的选择,适用于 Mac 和 Windows。
浓缩过后的精华
Laravel Nova 后台管理面板文档的中文翻译
Lumen 中文文档,由社区用户翻译和维护,将会保持一直更新
Laravel 下知名扩展包 Dingo API 的中文文档,Laravel API 开发必知必会