鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

45歳で年収500万円のサラリーマンはフリーランスに転身すべきか?

日々けちに暮らしていますが、40半にもなる親父なので
お金についてもう少しシビアに考えてみよう。
45歳でサラリーマン、このまま年収が変わらないで定年を迎える予定とします。
対するは、45歳でフリーランスに転換した場合。

厚生年金

サラリーマンだけが加入するもの。フリーランス
厚生年金部分を自分で貯蓄することになります。
厚生年金受給額の早見表とシミュレーション!年齢、加入期間による目安や計算のポイントは?! | 保険の疑問をしっかり解決
年収500万円。月額33万円だとすると、34年の加入で厚生年金は年額140万円。
65歳から20年生きるとして、2800万円。
45歳で退職して厚生年金を脱退するとすると厚生年金は19年加入したことになる。
そうすると厚生年金は年額80万円。
65歳から20年生きるとして、1600万円。
その差は1200万円。フリーランスは1200万円を60歳までの15年間で自力で貯めないといけないので年額80万、サラリーマンより必要になります。

年収500万円のサラリーマンはフリーランスだといくら稼げないとダメなの?

フリーランスの税金はどれくらい高いのか?
結局フリーランスだと厚生年金部分のプラス年額80万円預金が必要になるので
年収700万円程度、月58万円の仕事ができないとダメということになります。
それ以上の単価で稼働できない場合、思いとどまったほうが良いという結論になりました。
サラリーマンだと交通費が会社負担なので、客先常駐の場合、
交通費分更に稼がないとダメですね。

vscode+jestでユニットテスト(デバッグ)

ndenv環境を使っているので設定を変更(.vscode/launch.json)

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/node_modules/jest/node_modules/.bin/jest",
            "runtimeArgs": ["--inspect-brk"],
            "args": ["--runInBand", "--verbose", "--config=${workspaceRoot}/test/unit/jest.conf.js"],
            "runtimeExecutable": "${env:HOME}/.ndenv/shims/node",
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        }
    ]
}

console出力しないと慌てたけれど

こちらにサンプルがありましたとさぁ。

github.com

vuetify.jsを使ったアプリの単体テスト

v-textfield

idをつけた要素がそのまま、input要素にマッピングされるためにテストは素直にかける

<v-text-field id="name" v-model="name" required></v-text-field>
  <div class="input-group input-group--dirty input-group--required input-group--text-field primary--text">
    <div class="input-group__input">
      <input id="name" required="required" tabindex="0" type="text">
    </div>
    <div class="input-group__details">
      <!---->
    </div>
  </div>

v-checkbox

idをつけた要素が見当たらないし、input要素にマッピングされないため要素の特定が難しい

<v-checkbox id="flag" v-model="flag"></v-checkbox>
  <div tabindex="0" role="checkbox" aria-checked="false" class="input-group checkbox input-group--selection-controls accent--text">
    <div class="input-group__input">
      <i aria-hidden="true" class="icon icon--selection-control material-icons">check_box_outline_blank</i>
      <div class="input-group--selection-controls__ripple"></div>
    </div>
    <div class="input-group__details"><!----></div>
  </div>

テストコード

とりあえずこんな按配でコードを書いた。(avoriaz+jest)

import { mount } from 'avoriaz'
import Vue from 'vue'
import Vuetify from 'vuetify'
import Hello from '@/components/Hello'

Vue.use(Vuetify)

describe('Hello.vue', () => {
  it('should input name', () => {
      const wrapper = mount(Hello)
      const name = wrapper.find('input#name')[0]
      name.trigger('focus')
      name.element.value = 'TARO'    
      expect(wrapper.vm.name)
      .toEqual('TARO')
    })
    it('should input flag', () => {
      const wrapper = mount(Hello)
      console.log(wrapper.html())
      const flag = wrapper.find('.input-group--selection-controls__ripple')[0]
      flag.trigger('click')
      expect(wrapper.vm.flag)
        .toEqual(true)
    })
})

Vue+jestでテスト

以下のエラーが出てテストが通らない。

    console.error node_modules/vue/dist/vue.runtime.common.js:1715
      /Users/dokechin/work/gratan/src/assets/hero.jpeg:1
      ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){����
                                                                                               ^

jestで何か設定が足りないようです。

この辺だろうか・・
webpackのテンプレートに以下のプルリクを発見

github.com

これで、上記エラーは消えた。

次のエラーが現れる

        Failed to write coverage reports:
        ERROR: TypeError: metrics.isEmpty is not a function

これはhttps://github.com/facebook/jest/issues/5772

rm -rf node_modules
rm package-lock.json
npm install

次のエラー現れる

 Failed to write coverage reports:
        ERROR: TypeError: Cannot read property 'decl' of undefined
        STACK: TypeError: Cannot read property 'decl' of undefined
    at /Users/dokechin/work/gratan/node_modules/istanbul-reports/lib/lcovonly/index.js:32:38
    at Array.forEach (<anonymous>)
    at LcovOnlyReport.onDetail (/Users/dokechin/work/gratan/node_modules/istanbul-reports/lib/lcovonly/index.js:30:28)
    at LcovReport.(anonymous function) [as onDetail] (/Users/dokechin/work/gratan/node_modules/istanbul-reports/lib/lcov/index.js:21:24)
    at Visitor.(anonymous function) [as onDetail] (/Users/dokechin/work/gratan/node_modules/istanbul-lib-report/lib/tree.js:34:30)
    at ReportNode.Node.visit (/Users/dokechin/work/gratan/node_modules/istanbul-lib-report/lib/tree.js:123:17)
    at /Users/dokechin/work/gratan/node_modules/istanbul-lib-report/lib/tree.js:116:23
    at Array.forEach (<anonymous>)
    at visitChildren (/Users/dokechin/work/gratan/node_modules/istanbul-lib-report/lib/tree.js:115:32)
    at ReportNode.Node.visit (/Users/dokechin/work/gratan/node_modules/istanbul-lib-report/lib/tree.js:126:5)

そもそも、PWAテンプレートにjestサポートがないのが・・

前回のポストの後
vuetifyのユニットテストやっぱり、jestを使いたい - 鈍足ランナーのIT日記

Webpackテンプレートはjestをサポートしているのに、PWAテンプレートが
サポートしていないのがおかしい何とかしたいと思いたった。

技術のない私でもできるのか?
と思ったけれどやって見ると
そんなに難しくなかった。Webpackテンプレートを見ながら
取り込むだけだった。
とても勉強になった。
プルリクも久しぶりに送った。

しかーし。vue cliは3.0が開発中ですでに動かせる状態との情報が・・
これだとjestも選択的に取り込めるんだろうなぁ。と予想されます。

vue cli3.0の勉強をぼちぼちしてみよう。

vuetifyのユニットテストやっぱり、jestを使いたい

v-checkboxのユニットテストをしようとしたら、なかなかうまくいかない。
それはv-checkboxを展開したHTMLにinputタグが見えてこない。(階層が深いため?)
vuetify.jsのv-checkboxのテストソースを見たらjest.fn()を使っていて
jestを使ってテストしていた。

vue-cli(PWA)付属のユニットテストはkarmaを使ったテストになっているので
それをjestベースに書き換えてしようするようにしたい

npm install で以下のモジュールをインストール

  • jest
  • vue-jest
  • babel-jest
  • jest-serializer-vue
  • babel-plugin-transform-vue-jsx
  • babel-plugin-syntax-jsx
  • babel-plugin-dynamic-import-node

vue-cli(webpack)付属のユニットテストはjestベースなので、そちらのユニットテストのフォルダにある
jest.conf.jsとsetup.js,.babelrcをコピーして持ってきた。
とりあえず、これで起動できたけれど、jest用に一部書き換えないといけないようだ。
expectでエラーになっている。

to.contain()

toContain

equal

toBe