LaravelにJestを入れてVueのテストをする
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
Laravel のフロントエンドに Vue を採用した時、Jest を使ってテストコードを書いてみたいと思います。
Jest とは
Jest は、Javascript のテスト用のフレームワークです。
多分、これ使っておけば問題はないと思います。
環境構築
コマンドで Laravel で使っている mix に必要なパッケージを丸っといっしょにインストールします。
npm install --save-dev jest babel-jest @babel/core babel-core@bridge @babel/preset-env vue-jest @vue/test-utilsルートディレクトリに二つのファイルを作成します。
babel.config.js
module.exports = {
presets: [["@babel/preset-env", { modules: false }]],
env: {
test: {
presets: [["@babel/preset-env", { targets: { node: "current" } }]],
},
},
}jest.config.js
module.exports = {
transform: {
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
},
moduleFileExtensions: ["js", "vue"],
}最後に、package.json に 1 行追加します。
//"scripts": {
//scriptsのオブジェクトの中に1行を追加する。
"test": "NODE_ENV=test jest"
// }これで準備は OK です。
どのようにして Test するか
ファイルを作成します。
管理がしやすいように、resources/js/tests というフォルダを作ります。
そのフォルダの 中に、welcome.js というファイルを作成します。
これで準備ができたので、実際のテストを書いていくのですが、一番基本的な雛形的な部分だけ書きます。
import ExampleComponent from "../components/ExampleComponent"
const { mount } = require("@vue/test-utils")
test("テストのためのテスト", () => {
const component = mount(ExampleComponent)
console.log("a")
})これを実行してみます。
npm test結果が返ってきました。成功したようです。
mattun@iMac insta-clone % npm test
> @ test /Applications/MAMP/htdocs/insta-clone
> NODE_ENV=test jest
PASS resources/js/tests/welcome.test.js
✓ テストのためのテスト (25 ms)
console.log
Component mounted.
at VueComponent.mounted (resources/js/components/ExampleComponent.vue:20:1)
console.log
a
at Object.<anonymous> (resources/js/tests/welcome.test.js:7:13)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.627 s, estimated 2 s
Ran all test suites.これで、Component が無事 mounted されていることが確認できました。
本当に触りの部分でテンプレのところだけですが、以上が基本的な書き方となります。
まとめ
今回は、Jest を使って Laravel で Vue のテストを書いてみました。
本当に、触りの部分だけですが、この記事でセッティングが終われば、あとは「Jest Vue input」などで検索して Laravel 関係なく検索することが可能だと思います。
テストは、まだ自分も全然覚えていないところがあるので、新しい発見やほかのコードをどんどん載せていければと思います。
それでは、最後まで読んでいただきありがとうございました。
