旅好きエンジニアのメモ

旅のこと映画、統計、会計、プログラミングなど、気の向くままに語ります

railsにvue-test-utilsを入れてみる

前提

  • webpackは使わない。
  • node.jsを入れている。
  • npmを使用出来る

※ webpackを使わない理由は対象をrails5だけに絞っていないからです。

必要なものをinstall

npm install --save-dev jest @vue/test-utils vue-jest babel-jest jest-serializer-vue vue-cli babel-preset-es2015

各設定ファイルを編集する

./package.json

{
  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.19",
    "babel-jest": "^23.0.1",
    "babel-preset-es2015": "^6.24.1",
    "jest": "^23.1.0",
    "jest-serializer-vue": "^2.0.2",
    "vue": "^2.5.16",
    "vue-cli": "^2.9.6",
    "vue-jest": "^2.6.0"
  }
}

./.babelrc

{
  "presets": ["es2015"]
}

sampleのテストファイルを用意する

./app/assets/javascripts/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

./app/assets/javascripts/lib.js

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

./app/assets/javascripts/tests/App.test.js

import * as lib from '../lib';
describe('Counter', () => {

  it('run test !!!!!!!!!', () => {
    expect(1).toBe(1)
  })

  it('hoge_test', () =>  {
    expect(lib.square(11)).toBe(121)
  })
})

流してみる

npm test もしくは jest で流れます。

npm testで流れる理由はpackage.jsonに記載しているからです。