見出し画像

Vanilla JSとJest

友人が泊まりにきています。でもきちんと勉強もできました。

昨日の勉強の中で、Vanilla JSで60分ほどで小さなクラスを作って課題に取り組んだのですが、テストが大事です。前職ではJest, mocha, chaiメインでフロントエンドのテストを書いていました。こちらの会社は基本的にものすごくTDDにうるさいので、いいスキルになったと思っています。

ですが、設定ができない!初めてではないはずなのに初めてじゃんっていうくらいすっかり忘れていました。

yarn add jestですぐできると思ったら大間違い。たくさんの設定が必要でした。
そして、こちらのサイトが非常にためになりました。ありがたいです。

簡単にですが、jestインストール後の流れを抑えておきたいです。

jest.config.js

root directoryに作ってテストの基本的にこれらの設定

  • testMatch: テストのパスの設定

  • transform: babelの設定

  • testEnviroment: 'node' 人による

babel.config.js

yarn add -D @babel/preset-env これでbabelも入れます。babelは簡単にいうとピュアなJavaScriptに変換するトランスパイラーの役割をするそうです。
Reactなんかもそうですね。JSXで書いたやつをbabelとかがトランスパイルしてくれて、ブラウザーでピュアなJavaScriptが動作するという感じ。

  • presets: ここでcurrent version of Nodeを設定する

Jestのofficial docにもありました。

これでスイスイテストが動きました。やったー!

この記事が気に入ったらサポートをしてみませんか?