How to setup unit testing in a Laravel and Vue mono-repo application, with PHPUnit and Jest

Fig 1.0 — Laravel + Vue

Introduction

Laravel

Fig 2.0 — phpunit.xml

Test grouping

Mockery

Fig 2.2 — Mockery

Database transactions

Fig 2.3 — TestCase.php
Fig 2.4 — SomeTest.php

Laravel auth

Fig 2.5 — TestCase.php with test users added
$this->actingAs($this->adminUser());// and$user = $this->user();
  • if the designated user exists, return it,
  • otherwise, create it and return it.
Fig 2.6 — TestCase.php’s resetAuth method
Fig 2.7 — Demo of resetAuth function to reset auth state

Vue

  • @vue/test-utils
  • babel-core@bridge (note the @bridge)
  • babel-jest
  • jest
  • vue-jest
npm install --save-dev @vue/test-utils babel-core@bridge babel-jest jest vue-jest
npm install --save-dev @vue/test-utils jest vue-jest
{
"scripts": {
"test": "jest"
},
}
import { shallowMount } from '@vue/test-utils';
import App from './App.vue';
describe('App', () => {
it('works', () => {
const wrapper = shallowMount(App);
});
});
npm run test
import { shallowMount } from '@vue/test-utils';
^^^^^^
SyntaxError: Cannot use import statement outside a module
npm install --save-dev babel-core@bridge

jest.config.js

Fig 3.0 — jest.config.js file

Webpack aliases

import SomeComponent from '~/components/some-component.vue';
Fig 3.1 — .babelrc file

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam Mackintosh

I prefer to work near ES6+, node.js, microservices, Neo4j, React, React Native; I compose functions and avoid classes unless private state is desired.