基于 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

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

参考链接

《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

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