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に記載しているからです。