基于 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']);
}

好了，这里应该可以跑起来了，成功后的截图如下：

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

参考链接

• [Vue Test Utils 官方文档] (https://vue-test-utils.vuejs.org/zh/)
• https://medium.com/@sergiturbadenas/unit-t...
• https://github.com/JeffreyWay/laravel-mix/...
• https://nick-basile.com/blog/post/testing-...