Laravel-Mixでvue-test-utilsを使ってvueのコンポーネントテストを実行するまで #Laravel

概要

Laravel-mixで使うVueのテスト書くのにLaravel Dusk使うのもええんですけども、Vue Test Utilsなるものがあるのでそれを導入したお話。
プッシュしたタイミングでCircleCIさんがテストを実行してくれるようになるまで丸一日かかったのでやった手順を書き残す事にしやした。

環境

php 7.2
laravel 5.6
node.js 8.10
npm 5.6
circleci 2
docker compose 3

前提

Laravel-mixを使ってLaravelのasset/js配下にあるコンポーネントをコンパイルして使う
/tests/javascript配下にテストファイルを置く
CircleCIのテスト環境はローカルのdocker composeと同じ構成にする

手順

必要なパッケージをインストール

npm install --save-dev @vue/test-utils mocha mocha-webpack jsdom jsdom-global expect

package.jsonに新しいコマンドを登録

package.json

"scripts": {
    ・・・・,
    "test": "mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Javascript/setup.js tests/Javascript/**/*.spec.js"
},

tests/Javascriptにsetup.jsを追加

tests/Javascript/setup.js

require('jsdom-global')()

global.expect = require('expect')

tests/Javascriptにテストファイルを追加

tests/Javascript/Counter.spec.js

import { shallowMount } from '@vue/test-utils'
import Counter from '../../resources/assets/js/Counter.vue'

describe('Counter.vue', () => {
  it('increments count when button is clicked', () => {
    const wrapper = shallowMount(Counter)
    wrapper.find('button').trigger('click')
    expect(wrapper.find('div').text()).toMatch('1')
  })
})

テスト対象のコンポーネントを追加

resources/assets/js/Counter.vue

<template>
  <div>
    {{ count }}
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },

    methods: {
      increment() {
        this.count++
      }
    }
  }
</script>

npm run testでテストを実行する

CircleCIでプッシュ時にテスト実行してくれるまで

CircleCIのテスト環境はローカルのdocker composeと同じ構成にするってのがあったので、なかなか手間取ったのかもしれません。

config.ymlに以下を追加する

config.yml

- run:
    name: Setup Vue
    command: |
        cd docker
        docker-compose -f docker-compose-circleci.yml run {project-name} /bin/bash -c 'npm install'
- run:
    name: Run Test
    command: |
        cd docker
        docker-compose -f docker-compose-circleci.yml run {project-name} /bin/bash -c 'npm run test'

permission denied

普通にnpm installするだけではinstall途中の特定のパッケージだけpermision deniedが出てテスト環境がCircleCI上で構築できない。
npm install --unsafe-permする事で回避！

lib-pngがねぇよって怒られる

インストールする

Dockerfile

RUN yum install -y libpng-devel

くじけそうな時に手を差し伸べてくれたものたち(参考になった記事)

ハイライト

permission deniedになる原因を探るためにconfig.yml内でdocker execしようとした。
毎回プッシュしてCicleCIの環境ができてるか調べた。
現config.ymlはworkflows使ってて、CicleCIをlocalで動かそうとしたらworkflowsが対応してないって言われて涙目。