Laravel

LaravelにJestを入れてVueのテストをする

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

Laravel のフロントエンドに Vue を採用した時、Jest を使ってテストコードを書いてみたいと思います。

Jest とは

公式ドキュメント

Jest は、Javascript のテスト用のフレームワークです。

多分、これ使っておけば問題はないと思います。

環境構築

コマンドで Laravel で使っている mix に必要なパッケージを丸っといっしょにインストールします。

Qiita の参考記事

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 関係なく検索することが可能だと思います。

テストは、まだ自分も全然覚えていないところがあるので、新しい発見やほかのコードをどんどん載せていければと思います。

それでは、最後まで読んでいただきありがとうございました。