（Jest）引数で渡したcallbackのmockをテストする
mockしたメソッドの引数にcallbackを渡してそれをテストしたい。
( ͡° ͜ʖ ͡°)
べつにテストしたくないけどカバレッジが100%にならないからテストしたい。
こういうのがあったとする
func(() => { console.log('callback') })
func = jest.fn().mockImplementationOnce((cb) => cb())
MacBook Pro買うた
macbook買った。
なぜ買うた
今の仕事はPC至急してくれないので自分のPCを使わなければいけません。macbook airを持っていたのですが、
開発環境をdockerで完結する職場なのでメモリが8Gじゃ全然足りず、やむなくPCを買うことになりました。
グレード上げたところ
メモリ
- 16GB 2,133MHz LPDDR3メモリ
Docker使うと結構食うので、16GBは最低でも必要。これぐらいあればしばらくは安心な気がする。
MacBookの悪いところ
値段が高すぎ
zenbookとか約半分の値段でほぼ同じスペックなんだよね。。
軽くない
うん、軽くはない。
Touch Barいらない
必要ないとまでは言わないが、その分安くしてくれ。。
色が少ない
黒とシルバーだけ。airの方が選択肢が多い。高い買い物なのに選択肢が少なくなるなんて。。
結論
zenbook買ってubuntuとかでもよかったかもー。オーディオとかドライバの関係がめんどくさそうだなーと思ってチキったんですが、
別にオーディオつかわねぇー。損もせず、得もせずって買い物でした・
rails sでWebpacker configuration file not found
令和になってこれやってるワロタ😇
railsguides.jp
Rails6でrails sすると
Webpacker configuration file not found .. etc
Webpackerってなんやねんって思ったらwebpack関連のやつ
でこれ
rails webpacker:install
yarn入れてない人はこれがでる
Yarn not installed. etc.
yarnいれて再度実行
brew install yarn rails webpacker:install
で起動
rails s
素直にwebpack使わせてくれればいいのに。。
NuxtJSでloglevelを扱う
nodeのロガーはfsに依存しているものが多く、
クライアントで気軽に使えるのが少ない（Winston 、Bunyan、log4js-node全部だめ）
loglevelはなんでも行けるマンなのでこちらをNuxtJSで使う。
plugins/logger.js
/** * ref. https://github.com/pimterry/loglevel */ import Vue from 'vue' import * as log from 'loglevel' // 必要であれば log.noConflict(); log.setLevel('trace') Vue.prototype.$log = log
nuxt.config.js
plugins: [ ... { src: '~/plugins/logger.js', ssr: false }, ],
this.$log.error(e)
javascriptでregect
var arr = [1,2,3,4,5,6,7,8,9,10]; arr.splice(... [0,arr.length].concat(arr.filter((v) => v % 2 == 0)))
結局こっちがみやすい
arr = arr.filter((v) => v % 2 == 0)
fishでrbenv
$ rbenv init # Load rbenv automatically by appending # the following to ~/.config/fish/config.fish: status --is-interactive; and source (rbenv init -|psub)
~/.config/fish/config.fish
# rbenv set -x PATH $HOME/.rbenv/bin $PATH status --is-interactive; and source (rbenv init -|psub)
Rubyはモチベ上がらず
e2eにcypressとjest-puppeteer使った
結論
cypress一択
技術検証＋基盤導入の仕事があってどっちも軽く使ってみた。
cypress
導入まで
npm install cypress --save-dev
package.json
"scripts": { ... "test": "jest test", // cypressもテストするのでディレクトリ指定 "cypress:open": "cypress open", "cypress": "cypress run" },
.eslintrc.js
globals: {
cy: true,
},cypress.json
{ "baseUrl": "http://localhost:3000" "video": false // ビデオとかいらないので }
テストの頭に
// eslint-disable-next-line spaced-comment /// <reference types="Cypress" />
モック（これがバカ熱い）
cy.route({ method: 'GET', url: `/api/hoge`, response: 'fixture:hoge.json' })
課題
nuxtjsでやったけどカバレッジがjsしか取れなかった。あまり深堀せず。
Good
レンダリング待機とかそこらへんが一切不要。スラスラテストかける。モックかける
Bad
CIがだるい、これ依存しすぎでしょ。
apt-get install libgtk2.0-0 libgtk-3-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
jest-puppeteer
導入まで
npm install --save-dev jest-puppeteer puppeteer jest
.eslintrc.js
globals: { page: true },
jest.config.js
preset: 'jest-puppeteer'
package.json
"scripts": { ... "test:e2e": "jest e2e" },
jest-puppeteer.config.js
module.exports = { launch: { headless: true, slowMo: 1000 // これアプリケーション起動するまで待機してる感じ。よくないとおもう }, server: { command: 'BROWSER=none npm run dev', port: 3000, launchTimeout: 50000 } }
モック。interceptorなの
await page.setRequestInterception(true); page.on('request', request => { if (request.url() === constants.API) { request.respond({ content: 'application/json', headers: {"Access-Control-Allow-Origin": "*"}, body: JSON.stringify(constants.biddersMock) }); } else { request.continue(); } });
課題
jestだからカバレッジ取れるけど統合出来るのかな？
Good
puppeteer使う場面がテストだけじゃないので知識が活かせる
結論
cypress一択
