ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

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

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

目次

  1. Jest とは
  2. 環境構築
  3. どのようにして Test するか
  4. まとめ

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

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

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